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随 着 信息 技术 的 发 展 , 网 站 已 成 为 用 户 浏览 信息 的 平台 和 展示 企业 形象 及 文化 的 重要 窗口 ， 
开发 Web 网 站 和 手机 APP 也 随 之 成 了 热门 技术 。 而 作为 网 页 制作 基础 的 HTML5 和 CSS3， 也 
在 2014 年 发 布 后 迅速 流行 ， 受 到 各 大 浏览 器 的 支持 。HTMLS5 的 目标 就 是 将 Web 带 入 一 个 成 
熟 的 应 用 平台 , 在 这 个 平台 上 , 视频 , 音频 ,图像 、 动 画 及 用 户 与 电脑 的 交互 都 被 标准 化 .HIML5 
开创 了 互联 网 的 新 时 代 。 

本 书 根据 培养 高 技能 人 才 的 需求 ， 结 合 高 职高 专 学 生 的 学 习 特 点 ， 依 据 职 业 教育 培养 目标 
的 要 求 ， 以 爱 德 照明 网 站 的 开发 为 主线 ， 以 案例 为 引导 ， 将 介绍 知识 与 案例 设计 、 制 作 、 分 析 
融 于 一 体 。 在 案例 的 设计 与 制作 过 程 中 ， 把 各 章节 的 知识 点 融 于 其 中 ， 使 读者 能 快速 掌握 相关 
的 知识 和 技术 。 设 计 的 案例 由 小 到 大 、 由 简 到 繁 ， 这 样 能 够 引导 学 生 循序 渐进 地 学 习 制 作 网 页 
的 知识 和 技术 。 最 后 ， 本 书 通过 爱 德 照明 网 站 前 台 页 面 的 设计 介绍 网 站 项 目 开发 、 网 页 设计 制 
作 的 整个 流程 。 

本 书 从 网 页 的 基本 结构 出 发 ， 由 浅 入 深 地 讲述 HTML5 文档 的 基本 结构 和 创建 方法 、 网 页 
基本 元 素 、CSS 样式 的 定义 规则 及 优先 级 、 应 用 CSS 修饰 页 面 元 素 、 属性 选择 器 的 知识 及 应 用 、 
CSS3 盒子 模型 的 大 小 和 边框 设置 、 盒 子 的 内 外 边 距 设置 、 网 页 两 列 布局 技术 、 典 型 的 三 列 布 
局 技术 、 网 页 上 横向 导航 菜单 和 纵向 导航 菜单 的 设计 、 页 面 交互 元 素 表单 、HIML5+CSS3 简单 
动画 技术 、 页 面 音频 和 视频 嵌入 技术 、 网 站 开发 流程 等 知识 。 在 讲述 网 页 制作 的 各 种 技术 时 ， 
以 爱 德 照明 网 站 的 网 页 制作 为 案例 进行 教学 ， 并 运用 丰富 的 实例 来 讲解 知识 点 ， 注 重 培养 读者 
解决 实际 问题 的 能 力 。 

本 书 内 容 丰 富 、 结 构 合理 、 语 言 简洁 流畅 、 示 例 翔实 。 每 一 章 的 引言 部 分 都 概述 了 该 章 的 
学 习 目 标 。 在 每 一 章 的 正文 中 ， 结 合 案例 讲解 基础 知识 和 关键 技术 ， 并 穿插 大 量 示例 ， 最 后 通 
过 实 训 对 本 章 及 前 面 章节 所 学 的 知识 进行 综合 训练 。 每 一 章 末尾 都 安排 了 有 针对 性 的 练习 题 ， 
有 助 于 读者 巩固 所 学 的 知识 、 掌 握 实际 应 用 技术 、 培 养 解决 实际 问题 的 能 力 。 

本 书 既 可 作为 高 等 职业 院 校 计 算 机 、 网 络 、 软 件 等 专业 及 相关 专业 的 网 站 开发 和 网 页 制作 
教材 ， 也 可 作为 网 页 制作 爱好 者 、 网 站 开发 人 员 及 维护 人 员 的 学 习 参 考 书 。 


HTML5+CSS3 网 页 设计 基础 


除 封面 署名 的 作者 外 ， 参 与 本 书 编写 的 人 员 还 有 陈 露 露 、 崔 维 群 、 董 昌 艳 、 黄 萌 、 焦 广 霞 、 
刘 春 燕 、 刘 玉霞 、 钱 玉霞 、 宋 雅静 、 王 海 明 、 王 海 涛 、 许 崇 武 、 肖 凤 霞 、 辛 全 仓 、 杨 辉 、 张 入 
文 等 人 。 由 于 作者 水 平 有 限 ， 本 书 难免 有 不 足 之 处 ， 欢 迎 广大 读者 批评 指正 。 我 们 的 信箱 为 
huchenhao@263.net， 电 话 为 010-62796045。 

本 书 对 应 的 电子 课件 和 实例 源 代码 可 以 到 http://www.tupwk.conr.cn/downpage 网 站 下 载 , 也 
可 通过 扫描 如 下 二 维 码 下 载 。 


作 者 
2018 年 9 月 


1 
12 
13 


14 


| 
1.6 
L7 


网 页 的 布局 结构 … 
创建 HTML5 页 面 - 
人 4 
1.3.2 用 记事 本 创建 网 页 … 
1.3.3 用 Hbuilder 创 建 网 页 … 


23 


223 图 像 标签 及 其 属性 ……………………20 
2.2.4 ”绝对 路 径 与 相对 路 径 …………………23 
2.2.5 案例 制作 
超 链接 标签 - 
2.3.1 案例 分 析 
2.3.2” 超 链接 简介 … 
2.3.3” 超 链接 的 应 用 
2.3.4 ”案例 制作 … 


1.4.3 ”HTML5 语 句 结构 
1.44 HTML5 语 法 规范 


21 


22 


2.1.1 案例 分 析 … 
2.12 
2.13 


2.1.4 
215 
2.1.6 
2.1.7 <span>( 范 围 标签 )- 
2.1.8 


pW 
ti0 这 出 国 从 ee 
图 像 标签 …… 
2.2.1 案例 分 析 
22.2， 常 用 图 像 格式 19 


2.6 


p 


2.8 
29 


2.5.3 表格 的 基本 语法 
2.5.4 ”表格 的 修饰 … 
2.5.5 不 规范 表格 ………………………… 39 
2.5.6 案例 制作 … 
页 面 交 互 标签 
2.6.1 details 和 summary 元 素 … 


HTML5+CSS3 网 页 设计 基础 


第 3 章 CSS 入 门 -一 


3.1 


2 


33 


3.4 


3.5 
3.6 
3.7 


4.1 


CSS 的 定义 与 使 月 


3.12 CSS 的 定义 和 引用 
CSS 选 择 器 
3.2.1 案例 分 析 


3.22 CSS 样式 规则 ……………………51 


32.4 案例 制作 企业 简介 页 面 
CSS 属 性 单位 二 59 
3.3.1 长 度 与 百分比 单位 
3.3.2 色彩 单位 ……… 
ES 站 级 特性 :eco 全 
3.41 


3.42 CSS 的 层 恤 性 和 继承 性 


案例 一 制作 工程 案例 局 部 页 面 …… 


3.43 
3.4.4 


43 


42.1 “案例 分 析 083 
422 设置 图 像样 式 … 
42.3 ”案例 制作 
列表 样式 
43.1 案例 分 析 … 
4.3.2 设置 列表 项 的 标记 类 型 
43.3 ”设置 列表 项 的 标记 位 置 - 


44.1 案例 分 析 
442 ”border-collapse( 设 置 表格 边框 合并 )…92 


border-spacing( 设 置 单元 格 间 距 )…… 93 
empty-cells( 设 置 是 否 显示 

单元 格 边框)…………… 094 
caption-side( 设 置 表格 标题 的 位 置 )…95 


4.7 


第 5 章 CSS3 选 择 器 … 


3 


52 


5.5 


4 要 人 本 
4.5.2 任务 实现 


属性 选择 器 
E[attribute=value] 选 择 器 
FE[attibuteS=value] 选 择 器 
E[attribute*+=value] 选 择 器 …………… 


S.1.1 
5.12 
5.13 
5.14 


:nth-child(n) 和 :nth-last-child(n) 


nth-of-type(n) 和 :nth-last-of-type(n) 


5.2.4 


上 


526 1 
52.7 案例 制作 … 
5.3.1 案例 分 析 … 
5.3.2 :before 选择 器 - 
533 :afier 选 择 器 … 
53.4 ”案例 制作 
链接 伪 类 - 
54.1 案例 分 析 
542 ”案例 制作 


5.6 
Sy 


本 章 小 结 - 
练习 题 - 


第 6 章 “CSS 盒子 模型 …………………… 127 


6.1 
62 


63 


6.4 


6.5 
6.6 


第 7 章 “网 页 布局 设计 


Tl 


72 


3 


盒子 模型 简介 - 
盒子 的 外 观 属性 
62.1 案例 分 析 
62.2 ”盒子 模型 的 宽 和 高 
6.2.3 ”盒子 边框 属性 … 


6.3.2 
6.3.3 
63.4 ”背景 和 图 像 不 透明 度 设置 
63.5 案例 制作 ……………… 


本 章 小 结 -… 
练习 题 … 


网 页 布局 标签 
7.1.1 布局 标签 +CSS 布 局 的 优点 
7.12 页 面 分 块 
7.13 页面 结构 标签 … 
浮动 与 定位 … 
72.1 “案例 分 析 -ee 167 
2 


72.3 
72.4 
725 
7.2.6 
T2797 


73.1 
732 
7.3.3 三 列 自 适应 布局 ……………………… 189 


74 实 训 …… 
74.1 任务 分 析 
742 任务 实现 … 
7.5 本 章 小 结 - 
7.6 练习 题 


第 8 章 链接 与 导航 …………………… 199 


8.1 


8.13 设置 图 像 链接 样式 …… 


8.14 案例 一 制作 产品 中 心 -景观 


82 


8.2.1 案例 分 析 … 

8.22 纵向 导航 菜单 

823 案例 一 制作 产品 中 心 页 面 的 

左 侧 导 航 … 

8.3 横向 导航 菜单 的 设 让 

83.1 案例 分 析 ………… 

8.3.2 网 站 主导 航 菜单 的 设计 …………… 210 
8.3.3 ”案例 一 制作 产品 中 心 页 面 的 

页 码 导航 ……… 12 


8.42 任务 实现 ………………………214 
8.5 ”本章 小 结 
8.6 练习 题 - 


9.1 表单 标签 
9.2 ”表单 元 素 - 
92.1 案例 分 析 …………………… 226 
9.2.2 input 元 素 及 其 属性 … 
9.2.3 ”其 他 表单 元 素 …- 
92.4 ”案例 制作 ……………… 234 
9.3 用 CSS 控 制 表单 样式 - 
94。 实 训 ………… 
9.4.1 任务 分 析 …………… 
9.42 任务 实现 ……… 


HTML5+CSS3 网 页 设计 基础 


aa 


第 10 章 “CSS3 简 单 动画 二 245 
10.1 CSS3 过 渡 245 
1011 


10.1.2 
10.1.3 
10.1.4 
10.1.5 
2 
102.1 


10.2.2 认 i 


102.3 
102.4 


102.5 
10.3 动画 设计 
103.1 @keyfames 规 则 - 
1032 animation 属 性 …… 


10.4 
10.5 
10.6 


第 11 章 多 媒体 技术 … 
11.1 HTML5 多 媒体 特性 
11.1.1 多 媒体 格式 

11.12 支持 多 媒体 的 浏览 器 

11.2 巍 入 视频 和 音频 ………………… 


Lv 


113 
11.4 


11.6 
M7 


第 12 章 
12.1 


12.2 
12.3 
12.4 
12.5 
12.6 
12.7 


112.1 在 HTML5 中 嵌入 视频 …………275 
11.22 在 HTML5 中 嵌入 音频 … “277 
11.23” 音 视频 中 的 source 元 素 -278 
用 Css 控制 视 频 的 宽 高 …………279 
视频 和 音频 的 方法 和 事件 ………281 
11.4.1 video 和 audio 元 素 的 方法 …………281 
11.42 video 和 audio 元 素 的 事 人 -281 
1 人 和 存折 
11.52 


"285 


网 页 设计 站 大 eses:5:287 
287 
“288 
“288 
“289 
“289 


网 站 的 开发 流程 … 
12.1.1 需求 分 析 … 
12.12 站 点 规划 … 
12.13 ”网 站 制作 … 
12.1.4 测试 发 布 … 
用 HBulider 创 建 Web 项 目 … 
案例 : 制作 爱 德 照明 网 站 首页 
案例 : 制作 公司 新 闻 页 面 ………302 
案例 : 制作 联系 方式 页 面 ………308 
-310 


第 1 章 


随 着 信息 技术 的 发 展 ,网 站 已 成 为 各 单位 开展 工作 的 基础 设施 和 信息 平台 ,以 及 在 Intemet 
上 宣传 和 反映 企业 形象 和 文化 的 重要 窗口 。 在 网 站 的 建设 过 程 中 ， 网 页 设计 被 分 为 策划 、 前 台 
和 后 台 三 个 部 分 。 网 页 设计 工作 主要 包括 网 页 内 容 的 显示 、 总 体 颜 色 的 选择 、 页 面 的 排版 布局 
和 用 户 群 的 体验 度 等 。 网 页 设计 作为 一 门 综合 性 较 强 的 课程 ， 涉 及 商业 策划 、 平 面 设计 、 程 序 
语言 和 数据 库 等 。 本 章 将 介绍 网 页 的 基本 组 成 元 素 、 页 面 结构 和 创建 方法 。 


本 章 的 学 习 目 标 : 

了 解 网 页 上 常见 的 基本 元 素 及 其 特点 。 

了 解 网 页 的 布局 结构 ( 即 网 页 内 容 的 排版 知识 )。 
掌握 HTML5 网 页 常用 的 编辑 软件 。 

了 解 HIML5 的 发 展 、 优 势 以 及 浏览 器 支持 情况 。 
掌握 HTMLS 文档 的 基本 格式 和 语法 规范 。 
掌握 创建 和 浏览 网 页 的 方法 。 


国 I 网 页 的 基本 元 素 


要 学 习 网 页 设计 ， 首 先 应 该 认识 一 下 构成 网 页 的 基本 元 素 及 其 特点 ， 只 有 这 样 ， 才 能 在 设 
计 中 根据 需要 合理 地 组 织 和 安排 网 页 内 容 。 

图 1-1 所 示 是 爱 德 照明 网 站 的 首页 ， 其 中 包含 一 些 常见 的 网 页 元 素 ， 如 文本 、 图 片 动画 、 
声音 和 视频 、 超 链接 、 导 航 栏 、 网 站 LOGO 等 。 


1. 文本 


文本 是 最 重要 的 信息 载体 与 交流 工具 ， 网 页 中 的 信息 也 以 文本 为 主 。 文 本 虽然 不 如 图 片 色 
彩 鲜艳 ， 容 易 吸引 浏览 者 ， 但 却 能 准确 地 表达 信息 的 内 容 和 含义 。 

为 了 使 页 面 内 容 丰 富 多 彩 ， 人 们 对 网 页 中 的 文本 定义 了 许多 属性 ， 如 字体 、 字 号 、 颜 色 、 
底 纹 和 边框 等 。 通 过 设置 不 同 的 属性 ， 可 以 突出 显示 重要 的 内 容 。 此 外 ， 用 户 还 可 以 在 网 页 中 
设计 各 种 各 样 的 文本 列表 ， 用 来 清晰 地 表达 一 系列 内 容 。 
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we — Faded Ns 


图 1-1 网 页 的 基本 元 素 
2. 图 片 和 动画 
图 片 在 网 页 中 具有 提供 信息 、 展 示 作 品 、 装 饰 网 页 、 表 现 个 人 情调 和 风格 的 作用 。 用 户 在 
网 页 中 使 用 的 图 片 格式 主要 包括 GIF、JPEG 和 PNG 等 ， 其 中 使 用 最 广泛 的 是 GIF 和 JPEG 两 


种 格式 。 
在 网 页 中 ， 为 了 更 有 效 地 吸引 浏览 者 的 注意 ， 有 些 网 站 将 广告 做 成 了 动画 或 视频 。 


3. 声音 和 视频 


声音 和 视频 是 多 媒体 网 页 的 重要 组 成 部 分 ， 特 别 是 视频 文件 会 让 网 页 变 得 精彩 而 有 动感 。 
用 于 网 络 的 声音 文件 的 格式 非常 多 ， 常 用 的 有 MIDI、WAV、MP3、MP4 和 OGG 等 。 
一 般 情 况 下 ， 尽 量 不 要 使 用 声音 文件 作为 背景 音乐 ， 因 为 这 样 会 影响 网 页 的 下 载 速度 ， 可 
以 在 网 页 中 添加 打开 声音 文件 的 链接 ， 让 音乐 播放 变 得 随时 可 控 。 


4. 超 链接 


超 链接 是 指 从 一 个 网 页 指向 一 个 目标 的 链接 ， 这 个 目标 可 以 是 另 一 个 网 页 ， 也 可 以 是 相同 
网 页 上 的 不 同位 置 ， 还 可 以 是 一 张 图 片 、 一 个 电子 邮件 地 址 、 一 个 文件 ， 甚 至 是 一 个 应 用 程序 。 
当 浏 览 者 单 击 已 经 设置 链接 的 文本 或 图 片 后 ， 链 接 目 标 将 显示 在 浏览 器 中 ， 各 个 网 页 链接 在 一 
起 ， 就 构成 了 一 个 网 站 。 超 链接 技术 是 WWW 流行 起 来 的 最 主要 原因 。 

5. 导航 栏 


导航 栏 是 指 位 于 页 面 项 部 或 侧 边 区 域 ， 在 横幅 图 片上 边 或 下 边 的 一 排水 平 导航 按钮 ， 起 到 
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链接 站 点 或 站 点 内 各 个 页 面 的 作用 。 网 站 使 用 导航 栏 是 为 了 让 访问 者 更 清晰 地 定位 到 所 需要 的 
资源 区 域 ， 从 而 能 够 更 快捷 地 找到 资源 。 

一 般 情况 下， 导航 栏 应 放 在 网 页 中 较 引 人 注目 的 位 置 ， 通 常 是 在 网 页 的 顶部 或 一 侧 。 导 航 
栏 既 可 以 是 文本 链接 ， 也 可 以 是 一 些 图 形 按钮 。 


6. 表单 

表单 在 网 页 中 主要 负责 数据 采集 。 表 单一 般 用 来 收集 信息 ， 接 收 用 户 请 求 ， 获 得 反馈 意见 
等 。 例 如 ， 用 户 注册 和 管理 员 登 录 都 是 通过 表单 实现 的 。 

7. 其 他 常见 元 素 

网 页 中 除了 以 上 几 种 常见 的 基本 元 素 外 ， 还 有 一 些 其 他 的 常见 元 素 ， 包 括 按钮 、JavaScript 


特效 、ActiveX 控件 等 。 它 们 不 仅 能 美化 网 页 ， 使 网 页 更 活泼 有 趣 ， 而 且 在 网 上 娱乐 、 电 子 商 
务 等 方面 也 有 着 不 容 忽视 的 作用 。 


网 页 的 布局 结构 即 网 页 内 容 的 排版 ， 排 版 是 否 合理 直接 影响 页 面 的 内 容 展示 和 用 户 体验 ， 
并 在 一 定 程度 上 影响 网 页 的 整体 结构 。 

从 页 面 布局 的 角度 看 ， 页 面 的 布局 就 类 似 一 篇 文章 的 排版 ， 需 要 分 为 多 个 区 块 ， 较 大 的 区 
块 又 可 再 细 分 为 小 区 块 。 块 内 有 文本 、 图 片 、 超 链接 等 内 容 ， 这 些 区 块 一 般 称 为 块 级 元 素 ， 而 
区 块 内 的 文本 、 图 片 或 超 链接 等 一 般 称 为 行 级 元 素 ， 如 图 1-2 所 示 。 


1-2 ”网 页 的 布局 结构 
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创建 HTMLS 页 面 
在 网 页 的 制作 过 程 中 ， 为 了 开发 方便 ， 通 常 我 们 会 选择 一 些 较 便捷 的 工具 ， 如 记事 本 、 
Dreamweaver 和 HBuilder 等 。 在 实际 工作 中 ， 可 以 根据 需要 使 用 合适 的 软件 。 


1.3.1 ”案例 分 析 


【案例 展示 】 本 案例 设计 一 个 简单 的 页 面 ， 其 中 包含 网 页 标题 文字 和 一 行文 本 信息 ， 案 例文 
件 1-1html 在 正 浏览 器 中 的 浏览 效果 如 图 1-3 所 示 。 


车 | EVladLed\1-lLhtml 起 促 培 未 只 
大 WE3HIML5 x 
文件 (F) 泥 久 ( 日 理 看 (V) 收藏 天 (A) 工具 (T) 帮助 (H) 
HIML5 将 成 为 HTML、XHTML 以 及 HIML DOM 的 新 标准 。 


页 100% | 
图 1-3 页 面 浏览 效果 


【知识 要 点 】HTML 文档 的 结构 ， 网 页 的 创建 、 保 存 与 浏览 。 
【学 习 目 标 】 掌 握 使 用 记事 本 和 HBuilder 创建 、 保 存 和 浏览 网 页 的 方法 。 


1.3.2 ”用 记事 本 创建 网 页 


用 记事 本 创建 网 页 的 过 程 如 下 。 

(1) 打开 记事 本 。 单 击 Windows 的 “开始 ”按钮 ， 在 “所 有 程序 ”菜单 的 “附件 ” 子 菜单 
中 单 击 “ 记 事 本 ”命令 。 

(2) 创建 新 文件 。 按 照 HTMLS5 语法 规范 在 “记事 本 ”窗口 中 输入 代码 ， 有 具体 内 容 如 图 1-4 
所 示 。 


文件 (F) 编辑 日 
<!DOCTYPE htm1> 
I<html> 

《head> 


<meta charset="UTF-8"> 
《title> 欢 他 学 习 HTML5</title> 

/he: 

<body> 
HTML5 将 咸 为 HTML、XHTNL 以 及 HTML DOM 的 新 标准 - 


图 14 HTML5 代码 


(3) 保存 网 页 。 打 开 “ 记 事 本 ”的 “文件 ”菜单 ， 选 择 “ 保 存 ” 命 令 ， 打 开 “ 另 存 为 ”对 
话 框 ， 在 其 中 选择 文件 要 存放 的 路 径 ， 在 “文件 名 ”文本 框 中 输入 以 html 或 htm 为 扩展 名 的 文 
件 名 ， 如 1-1.html， 在 “保存 类 型 ”下 拉 列 表 框 中 选择 “所 有 文件 (*.*)” 选 项 ， 在 “编码 ”下 
拉 列 表 框 中 选择 “UTF-8” 选 项 ， 如 图 1-5 所 示 。 最 后 单 击 “ 保 存 ” 按 钮 ， 将 记事 本 中 的 内 容 
保存 到 相应 的 文件 夹 中 。 


| 
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| 
不 ， 计算 机 ， 本 地 磁盘 [E) ， AladLed ， Mb EFLE) Pp 
组 织 ” 。 新 尘 文件 实 
各 最 后 访问 的 位 置 > 


画 点 面 用 


富 不 We 
RR Administrator 下 
师 计算 机 

WINT CC 

之 新 加 蕉 (0;) 

过 布地 三 盘 (E) 

项 DVD 驱 a 强 四 VCD 


动 - @ 


文件 名 (N): 1-Lhtml | 
保存 类 型 (: [所 有 文件 《人 本 


mh we Bess) [fe] 
图 1-5 记事 本 的 “另存 为 ”对 话 框 


(4) 浏览 网 页 。 在 “计算 机 ”中 相应 的 文件 夹 中 双击 1-1.html 文件 ， 启 动 浏览 器 ， 即 可 看 
到 网 页 的 显示 结果 ， 图 1-3 所 示 为 网 页 在 正 浏览 器 中 的 浏览 效果 。 
(5) 查看 网 页 源 代码 。 在 浏览 器 窗口 中 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 单 击 “ 查 看 源 
代码 ”命令 ， 即 可 打开 当前 显示 页 面 的 源 代码 窗口 ， 如 图 1-6 所 示 。 
[Bien 网 lee | 


文件 (F) 编辑 (日 格式 (0) 
kipocTyPE mly 
hry 


ro 
2 
3 head) 

| neta charset=“UTF-S 

5 Stitle> 鸡 迎 学 习 HTWL5</tirIe> 
日 <yhead> 

让 Shody 

3 


ody7 
HTEL5 将 成 为 FTIL 、XHTIL 以 及 HTML DON 的 新 标准 。 
3 /body> 


19 </htm1> 


图 1-6 网 页 源 代码 窗口 


【案例 说 明 】 如 果 希 望 将 该 网 页 作为 网 站 的 首页 (主页 )， 可 以 把 这 个 文件 设 为 默认 文档 ， 文 
件 名 为 index .htm 或 index html。 


1.3.3 用 Hbuilder 创建 网 页 


用 HBuilder 创建 网 页 的 过 程 如 下 。 

(1) 启动 HBuilder， 创 建 Web 项 目 。 依 次 单 击 “ 文 件 ” 一 “新 建 ” 一 “Web 项 目 ”命令 ， 
弹出 “创建 Web 项 目 ” 对 话 框 ， 在 “项 目 名 称 ” 后 的 文本 框 中 输入 Web 项 目的 名 称 ， 单 击 “ 浏 
览 ” 按 钮 ， 选 择 文件 要 存放 的 路 径 ， 如 图 1-7 所 示 。 最 后 单 击 “ 完 成 ”按钮 ， 在 HBuilder 项 目 
管理 器 中 将 显示 所 创建 的 项 目 ， 如 图 1-8 所 示 。 
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默认 项 目 只 包 言 indexhtml 文 件 
Hello HBuilder ”该 项 目 可 以 让 你 快速 了 解 HBuilder , 试 一 下 吧 上 
被 信 项 目 币 信 WEB App ， 使 用 此 模板 支持 微 信 JS-SDK 的 提示 模板 


Dindex.html 


GO v WHelloHBuilder 
图 1-7 “创建 Web 项目” 对话 框 图 1-8 项 目 管理 器 
(2) 创建 HTML 文件 。 在 HBuilder 项 目 管理 器 中 单 击 项 目 名 称 , 在 项 目 名 称 上 单 击 鼠 标 右 
键 ， 在 弹出 的 快捷 菜单 中 选择 “新 建 ” 命 令 ， 单 击 “HTML 文件 ”， 弹 出 “创建 文件 向 导 ” 对 
话 框 。 在 该 对 话 框 的 “文件 名 (F)” 后 的 文本 框 中 输入 网 页 的 主 文件 名 ,保留 html 扩展 名 ， 并 
选择 html5 模板 , 如 图 1-9 所 示 。 最 后 单 击 “ 完 成 ”按钮 , 在 HBuilder 编辑 区 创建 默认 的 HIMLS 
文档 。 


本 向 导 创建 * html .htm 扩展 名 的 文件 


文件 所 在 目录 (O: /AladLed 


会 muie9html 
空白 文件 


mui 下 拉 刷 新、 上 拉 M0 载 
mui 底 部 选项 卡 (Webview 檬 式 ) 


图 1-9 “创建 文件 向 导 ” 对 话 框 


G3) 编辑 文件 。 在 HBuilder 编辑 区 输入 文本 和 代码 ， 在 “模式 ”下 拉 列 表 框 中 选择 “ 边 改 
边 看 模式 ”， 进 入 边 改 边 看 模式 。 在 此 模式 下 ， 如 果 当 前 打开 的 是 HIML 文件 ， 每 次 保存 均 会 
自动 刷新 以 显示 当前 页 面 效果 ， 具 体内 容 如 图 1-10 所 示 。 
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IBuildet 
转 义 (D) 选择 (S$) 后 转 (G) 查找 (|】 运行 (R) 发 行 (8) 工具 (D， 视 蜀 (V) 帮助 (H) 
NCA 搜索 (双击 Ctrl ) 


B11html B1 
=| Ct〈【【、 orn me 
23<htnl> 
3 head> | HIMLS 将 成 为 HIML、XHTNL 以 
4 <meta charset="UTF-8"> 及 HTML DONM 的 新 标准 。 

<title> 欢 迎 学 习 HTML5</title> 
</head> 
3 cbody> 
8 HTMLS 将 成 为 HTML、XHTNL 以 及 HTML DOM 的 新 标准 - 


9 </body> 
18 </html> = 
< 1 了 


夺 度 于 本 HTML Editor 
图 1-10 使 用 HBuilder 编辑 网 页 文件 


(4) 浏览 网 页 。 单 击 快捷 工具 栏 中 的 浏览 器 按钮 "或 按 CtrlrR 组 合 键 ， 启 动 浏览 器 ， 即 
可 看 到 网 页 的 显示 结果 。 


HTMLS 基础 


HTML5 是 超 文本 标记 语言 ( HyperText Markup Language) 的 第 5 代 版 本 ， 它 的 目标 就 是 将 
Web 带 入 一 个 成 熟 的 应 用 平台 。 在 这 个 平台 上 ， 视 频 、 音 频 、 图 像 、 动 画 以 及 用 户 与 电脑 的 交 
互 都 被 标准 化 。HTMLS5 开创 了 互联 网 的 新 时 代 。 


1.4.1 HTML5 概述 


1. HTML5 的 发 展 


2014 年 10 月 29 日 ， 万 维 网 联盟 宣布 ， 经 过 8 年 的 艰辛 努力 ，HTMLS5 标准 规范 终于 制定 
完毕 ， 并 公开 发 布 。HITML5 已 逐渐 取代 HIML 4.01、XHTML 1.0 标准 ， 能 在 互联 网 应 用 迅速 
发 展 的 同时 ， 使 网 络 标准 符合 当前 的 网 络 需求 ， 为 桌面 和 移动 平台 带 来 无 颖 衔接 的 丰富 内 容 。 
HTML5 还 有 望 成 为 梦想 中 的 “开放 Web 平台 ”(Open Web Platform) 的 基石 ， 如 能 实现 ， 就 可 
进一步 推动 更 深入 的 跨 平 台 Web 应 用 。 


2. HTML5 的 优势 


作为 当下 流行 的 通用 标记 语言 ，HIML5 严格 遵循 “简单 至 上 ”的 原则 ， 主 要 体现 在 以 下 
几 个 方面 。 

e 新 的 简化 的 字符 集 声明 。 

e 新 的 简化 的 DOCTYPE。 

@ 简单 而 强大 的 HIML5S API。 

e ”以 浏览 器 原生 能 力 蔡 代 复杂 的 JavaScript 代码 。 

为 了 实现 这 些 简化 操作 ，HTML5 规范 比 以 前 更 加 细致 、 精 确 ， 对 每 一 个 细节 都 有 非常 明 
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确 的 规范 说 明 ， 不 允许 有 任何 的 歧义 出 现 。 

3. 浏览 器 支持 

在 HIML5 之 前 ， 各 大 浏览 器 厂商 为 了 争夺 市 场 占有 率 ， 在 各 自 的 浏览 器 中 增加 了 各 种 各 
样 的 功能 ， 并 且 没 有 统一 的 标准 。 使 用 不 同 的 浏览 器 ， 常 常 看 到 不 同 的 页 面 效果 。 在 HTML5 
中 ， 纳 入 了 所 有 合理 的 扩展 功能 ， 具 备 良 好 的 跨 平 台 性 能 。 

现今 浏览 器 的 许多 新 功能 都 是 从 HIMLS 标准 中 发 展 而 来 的 。 目 前 常用 的 浏览 器 有 正 、 火 
狐 (Firefox)、 谷歌 (Chrome)、Safari 和 Opera 等 , 通过 对 这 些 主流 Web 浏览 器 的 发 展 策略 的 调查 ， 
发 现 它 们 都 在 支持 HTML5 上 采取 了 措施 。 


1.4.2 HTML5 文档 结构 


每 个 网 页 都 有 基本 的 结构 , 包括 HTML 文档 的 结构 、 标 签 的 格式 等 。HIML 文档 是 一 种 纯 
文本 格式 的 文件 ， 文 档 的 基本 结构 为 : 
<!IDOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 网 页 标题 </title> 
</head> 


网 页 内 容 


</body> 
</html> 


HTMLS5 文档 的 基本 格式 中 , 主要 包括 <IDOCTYPE> 文 档 类 型 声明 、<html> 根 标签 、<head> 
头 标签 、<meta> 标 签 、<title> 标 题 标签 、<body> 主 体 标签 ， 具 体 介绍 如 下 。 


1. <IDOCTYPE> 文 档 类 型 声明 


<!IDOCTYPE> 文 档 类 型 声明 必须 是 HTML 文档 的 第 一 行 ， 位 于 <html> 根 标签 之 前 ， 指 示 
Web 浏览 器 关于 当前 页 面 应 使 用 哪 种 HTML 标准 规范 。 
HTMLS5 文档 使 用 <!IDOCTYPE html> 声 明 ， 会 触发 浏览 器 以 标准 兼容 模式 来 显示 页 面 。 


2. <html> 根 标签 


<html> 标 签 位 于 <!IDOCTYPE> 标 记 之 后 ， 也 称 为 根 标签 ,表示 HTML 文档 的 开始 ， 即 浏览 
器 从 <html> 开 始 解释 ， 直 到 </html> 为 止 。 每 个 HTML 文档 均 以 <html> 开 始 ， 以 </html> 结 束 。 


3. <head> 头 标签 


<head> 头 标签 用 于 定义 HTML 文档 的 头 部 信息 ， 紧 跟 在 <html> 根 标签 之 后 ,主要 用 来 封装 
uri ， 例 如 <title>、<meta>、<link> 及 <style> 等 ， 以 描述 文档 的 标题 、 编 
码 语言 、 文 件 地址 、 创作 信息 等 网 页 说 明 信 息 。 
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4. 文档 编码 


为 了 能 够 被 浏览 器 正确 解释 和 通过 W3C 代码 校 验 ， 所 有 的 HTML 文档 都 必须 声明 它们 所 
使 用 的 编码 语言 。HTMLS5 文档 使 用 meta 元 素 的 charset 属性 来 指定 文档 编码 ， 格 式 如 下 : 


<meta charset="UTF-8"> 
5. <title> 标 题 标 签 
<title> 标 签 用 来 定义 文档 的 标题 。 浏 览 器 通常 把 标题 放置 在 浏览 器 窗口 的 标题 栏 或 状态 栏 
中 。 当 把 文档 加 入 用 户 的 链接 列表 、 收 藏 夹 或 书签 列表 时 ， 标 题 将 成 为 文档 链接 的 默认 名 称 。 
6. <body> 主 体 标签 


<body> 标 签 用 于 定义 HIML 文档 所 要 显示 的 内 容 。 主 体位 于 头 部 之 后 ， 以 <body> 为 开始 
标签 ， 以 </body> 为 结束 标签 。 浏 览 器 中 显示 的 所 有 文本 、 图 像 、 音 频 和 视频 等 信息 都 必须 位 于 
<body> 主 体 标签 内 。 它 定义 网 页 上 显示 的 主要 内 容 与 显示 格式 ， 是 整个 网 页 的 核心 。 

一 个 HIML 文档 只 能 含有 一 对 <body> 标 签 ， 且 <body> 标 签 必须 在 <html> 标 签 内 ， 位 于 
<head> 头 标签 之 后 ， 与 <head> 头 标签 是 并 列 关系 。 


1.4.3 ”HTML5 语句 结构 

HTMLS5 语句 主要 由 标签 、 属 性 和 元 素 构成 ， 语 法 结构 如 下 : 

< 标签 属性 1=" 属 性 值 1" 属性 2=" 属 性 值 2" .> 元 素 的 内 容 </ 标 签 > 

1. 标签 

标签 分 为 单 标签 和 双 标签 ， 单 标签 如 <br>、<hr> 等 ， 双 标签 由 开始 标签 和 结束 标签 两 个 标 
签 组 成 且 必 须 成 对 出 现 ， 如 <p>.…</p> 等 。 

2. 属性 


属性 在 开始 标签 中 指定 ， 用 来 表示 标签 的 性 质 和 特性 。 通 常 都 以 “属性 名 =" 值 "” 的 形式 来 
表示 ， 有 多 个 属性 时 用 空格 隔 开 ， 并 且 在 指定 多 个 属性 时 不 用 区 分 顺序 。 

例如 ， 段 落 标签 <p> 有 属性 align，align 表示 文字 的 对 齐 方式 ， 表 示 为 : 

<p align="center"> 欢 迎 访问 本 网 站 </p> 


3. 元 素 


元 素 指 的 是 包含 标签 在 内 的 整体 ， 元 素 的 内 容 是 指 开 始 标签 与 结束 标签 之 间 的 内 容 。 
例如 : 

<hl> 欢 迎 访问 本 网 站 <hl> 

上 面 的 代码 表示 定义 hl 元 素 ， 而 元 素 的 内 容 是 “欢迎 访问 本 网 站 ”。 
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1.4.4 HTML5 语法 规范 


页 面 的 HTMLS 代码 书写 必须 符合 HTML 规范 ， 这 样 文档 才 可 以 被 所 有 的 浏览 器 支持 ,并 
且 可 以 向 后 兼容 。 


- 标签 和 属性 的 规范 


标签 名 和 属性 建议 都 用 小 写字 母 。 

HIML 标签 可 以 峰 套 ， 但 不 允许 交叉 。 

HIML 标签 中 的 一 个 单词 不 能 分 两 行 写 。 

属性 值 都 要 用 双 引 号 括 起 来 。 

HIML 源 文件 中 的 换行 符 、 回 车 符 和 空格 在 显示 效果 中 是 无 效 的 。 


. 代码 的 缩 进 


HTML 代码 并 不 要 求 在 书写 时 缩 进 ， 但 为 了 文档 的 结构 性 和 层次 性 ， 建 议 使 用 标签 时 首尾 
对 齐 ， 内 部 的 内 容 向 右 缩 进 几 格 。 


实 训 


【 实 训 任务 】 练 习 创 建 网 页 文档 ， 展 示 企 业 简介 信息 ， 案 例文 件 1-2.html 在 Chrome 浏览 器 
中 的 显示 效果 如 图 1-11 所 示 。 


i 


Dh 
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公司 成 立 于 2008 年 ， 是 一 家 专业 照明 亮 化 工程 公司 ， 公 司 拥有 国家 一 级 工程 施工 次 
质 ， 同 时 也 是 一 家 集 市 政 路 灯 、 户 外 亮 化 、 照 明 工 程 设计 、LED 室 内 外 灯具 销售 及 施工 
为 一 体 的 大 型 专业 化 “照明 工程 ”公司 。 


图 1-11 企业 简介 页 面 


【知识 要 点 】HIMLS5 文档 的 语法 结构 ， 使 用 HBuilder 创建 、 保 存 和 浏览 网 页 。 
【 实 训 目标 】 掌 握 创 建 、 保 存 和 浏览 网 页 的 方法 。 
(1) 启动 HBuilder， 并 新 建 一 个 HTMLS5 文档 ， 文 件 名 为 1-2.html。 
(2) 在 HBuilder 编辑 区 编辑 HTMLS5 文档 ， 网 页 文档 代码 如 下 。 
<!IDOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 企 业 简 介 </title> 
</head> 
<body> 
&nbsp:&nbsp:&nbsp:&nbsp: 公 司 成 立 于 2008 年 ， 是 一 家 专业 照明 亮 化 工程 公司 ， 公 司 拥有 国家 一 级 
工程 施工 资质 ， 同 时 也 是 一 家 集 市 政 路 灯 、 户 外 亮 化 、 照 明 工程 设计 、LED 室内 外 灯具 销售 及 施工 为 一 体 的 大 
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型 专业 化 “照明 工程 "公司 。 

<body> 

<html> 

G) 保存 文档 。 

(4) 浏览 网 页 。 在 浏览 器 中 浏览 制作 完成 的 页 面 ， 页 面 显示 效果 如 图 1-11 所 示 。 

【 实 训 说 明 】 本 例 中 段落 首 行 缩 进 的 效果 是 通过 插入 特殊 符号 “&nbsp:” 来 实现 的 。HTML 
语言 忽略 多 余 的 空格 ， 只 空 一 个 空格 。 在 需要 空格 的 位 置 ， 可 以 用 “&nbsp;:” 插 入 一 个 半角 空 
格 ， 也 可 以 输入 全 角 中 文 空格 。 


本 章 小 结 


本 章 讲述 了 网 页 的 基本 元 素 、 布 局 结构 和 网 页 编辑 技术 。 首 先 介绍 了 网 页 上 常见 的 基本 元 
素 和 网 页 的 布局 结构 知识 。 然 后 结合 案例 介绍 了 常用 的 网 页 编辑 工具 一 一 记事 本 和 HBuilder。 
最 后 介绍 了 HTMLS 文档 的 结构 和 语法 规范 等 内 容 。 


练习 题 


1. 打开 搜狐 网 http:/www.sohu.com) 主 页 ， 分 析 说 明 网 页 上 有 哪些 基本 元 素 。 

2. 打开 搜狐 网 http://www.sohu.comy) 主 页 ， 分 析 说 明 页 面 上 的 哪些 元 素 是 块 级 元 素 ， 哪 些 
是 行 级 元 素 。 

3. 简 述 HTML5 文档 的 基本 结构 和 语法 规范 。 

4. 运用 HTMLS5 文档 的 基本 格式 制作 并 浏览 简单 的 页 面 。 
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网 页 基本 元 素 


随 着 网 络 技术 的 发 展 ， 网 页 内 容 也 更 加 丰富 多 样 。 展 示 网 页 内 容 的 元 素 包括 文本 、 图 像 、 
列表 、 表 格 、 链 接 等 ， 本 章 将 具体 介绍 页 面 上 常用 的 各 种 元 素 的 标签 及 其 属性 。 


本 章 的 学 习 目 标 : 

掌握 文本 控制 标签 的 功能 和 使 用 方法 。 

掌握 图 像 标签 及 其 属性 的 功能 和 使 用 方法 。 

掌握 网 页 上 常用 超 链 接 的 设置 方法 。 

掌握 列表 标签 及 其 属性 的 功能 和 使 用 方法 。 

掌握 表格 标签 及 其 属性 的 功能 和 使 用 方法 。 

掌握 页 面 交互 元 素 的 功能 和 用 法 。 

掌握 综合 应 用 各 种 页 面 元 素 的 标签 及 其 属性 制作 页 面 的 方法 。 


多] 文本 控制 标签 


2.1.1 ”案例 分 析 


【案例 展示 】 招 商 加 盟 - 加 盟 中 心 局 部 页 面 的 设计 。 

使 用 标题 标签 、 段 落 标签 、 换 行 标签 、 水 平 线 标签 、 文 本 格式 控制 标签 等 设计 招商 加 盟 -加 
盟 中 心 局 部 页 面 ， 本 例文 件 2-1.html 在 浏览 器 中 的 显示 效果 如 图 2-1 所 示 。 

【知识 要 点 】 标 题 标签 、 段 落 标签 、 换 行 标签 、 水 平 线 标签 、 文 本 格式 控制 标签 等 。 

【学 习 目标 】 掌 握 标题 标签 、 段 落 标签 、 换 行 标签 、 水 平 线 标签 、 文 本 格式 控制 标签 的 作用 
并 灵活 应 用 。 
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加 盟 中 心 


合作 项 目 

开展 新 款 洗 娘 杂 、LED 抽 洛 深 LED 瓜 6 旭 、LED 器 条 尖 等 户外 灯具 批发 和 灯饰 招商 加 品 项 目 。 
加 盟 理 由 

1 网 店 代销 灯具 批发 的 市 场 前 景 广阔 。 

2 .成 本 低 ， 风 险 低 ， 利 润 高 ， 是 现在 创业 从 商 的 最 好 选择 ! 

3 .我们 通过 淘宝 分 销 平台 的 灯具 批发 ， 全 力 打造 一 个 网 店 代销 的 商业 联盟 ， 共 同 创业 ! 
加 盟 热线 


全 国 灯具 批发 加 盟 热 绪 : 400-180-6788, 400-180-6789 


图 2-1 招商 加 盟 -加 盟 中 心 局 部 页 面 


2.1.2 ”<hn>( 标 题 标签 ) 


在 页 面 上 ， 标 题 是 一 段 文字 内 容 的 引领 ， 起 着 着 重 强调 的 作用 。HTML 提供 了 6 个 等 级 的 
标题 ， 即 <hl>、<h2>、<h3>、<h4>、<h5> 和 <h6>，<h1> 定 义 最 大 的 标题 ，<h6> 定 义 最 小 的 标 
题 。 其 基本 语法 格式 如 下 。 

<hn align= "lefilcenteriright"> 标 题 文 字 </hn> 

说 明 : n 的 取 值 为 1-6。align 为 可 选 属性 ， 用 来 设置 标题 在 页 面 上 的 对 齐 方式 ， 它 的 取 值 
为 left( 左 对 齐 )、center( 居 中 对 齐 ) 和 right( 右 对 齐 )， 默 认 取 值 为 left。 

属性 align 不 推荐 使 用 ， 最 好 用 CSS 样式 定义 标题 在 页 面 上 的 排列 位 置 。 

【 例 2-1-1】 标 题 示 例 ， 本 例 的 浏览 效果 如 图 2-2 所 示 ， 页 面 文件 2-1-1.html 的 代码 如 下 。 

<!IDOCTYPE html> 

<html> 

<head> 
<meta charset="utf-8"> 
<title> 标 题 示例 </title> 

</head> 

<body> 
<hl align="left"> 这 是 一 级 标题 </h1> 
<h2 align="center"> 这 是 二 级 标题 <h2> 
<h3 align="right"> 这 是 三 级 标题 </h3> 
<h4> 这 是 四 级 标题 <h4> 
<h5> 这 是 五 级 标题 </h5> 
<h6> 这 是 六 级 标题 <h6> 

</body> 

</html> 
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使 用 align="left'、align="center" 和 align="right" 分 别 设置 标题 的 显示 方式 为 左 对 齐 、 居 中 对 
齐 和 右 对 齐 。 


图 2-2 标题 示例 


2.1.3 ”<p>( 段 落 标签 ) 
在 网 页 中 要 把 段落 整齐 划一 地 显示 出 来 ， 就 需要 使 用 段落 标签 ， 段 落 标 签 是 <p>.…</p>。 
段落 标签 会 在 段落 前 后 增加 空 行 。<p> 是 HTML 文档 中 最 常见 的 标签 ， 其 基本 语法 格式 如 下 。 
<p align= "leflcenterright > 段落 文 字 <p> 
属性 align 的 取 值 和 功能 请 参考 标题 标签 中 的 说 明 。 


2.1.4 ”<br/>( 换 行 标签 ) 

默认 情况 下 网 页 中 的 文字 会 从 左 到 右 依次 排列 ， 直 到 浏览 器 窗口 的 右 端 再 自动 换行 。 如 果 
在 编辑 网 页 内 容 时 ， 只 想 换行 而 不 需要 开始 新 的 段落 ， 可 以 使 用 换行 标签 <br>。 

<br> 标 签 的 作用 是 强制 文本 换行 ， 即 <br> 以 后 的 内 容 (文字 、 图 像 、 表 格 等 ) 显 示 在 下 一 行 ， 
不 会 在 行 和 行 之 间 留 下 空 行 ， 其 基本 语法 格式 如 下 。 

文字 <brA 或 <br 记 文字 

使 用 换行 标签 ， 可 以 使 页 面 内 容 整 齐 、 美 观 。 


2.1.5 “<hr>( 水 平 线 标签 ) 
水 平分 隔 线 可 以 将 文档 分 隔 ， 使 页 面 看 起 来 结构 清晰 、 层 次 分 明 。 
可 以 使 用 <hr> 标 签 在 页 面 上 显示 一 条 水 平 线 ， 其 基本 语法 格式 如 下 。 
<hr align="leftlcenterlright" size="n" width="nl%%" color="color" noshade="noshade"/> 
属性 介绍 如 下 。 
。 align: 参考 标题 标签 中 有 关 align 的 说 明 。 
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e@ size: 设置 水 平 线 的 粗细 ，n 取 正 整数 ， 默 认为 2 像素 。 

e width: 设置 水 平 线 的 长 度 ，n 取 正 整数 表示 确定 的 像素 值 ， 也 可 以 取 浏 览 器 窗口 的 百 
分 比值 ， 默 认为 100%。 

e@ color: 设置 水 平 线 的 颜色 ， 默认 为 黑色 。 可 以 用 颜色 名 称 、 十 六 进 制 # 术 GB 或 rgb(r,g,b) 
来 表示 。 

e@ ”noshade: 设置 水 平 线 是 否 要 阴影 ， 默 认 有 阴影 。 

说 明 : 最 好 用 CSS 定义 水 平 线 的 样式 ， 而 不 用 hr 元 素 的 各 种 属性 。 

例如 : 定义 一 条 水 平 线 ， 居 中 显示 、 粗 5px、 宽 400px、 红 色 、 无 阴影 ， 代 码 如 下 。 

<hr align="center" size="5" width="400" color="red" noshade="noshade"/> 


2.1.6 文本 格式 化 标签 


在 网 页 中 ， 有 时 需要 为 文字 设置 粗 体 、 和 斜体 或 下 画 线 等 效果 。 为 此 ，HTML 准备 了 专门 的 
文本 格式 化 标签 ， 使 文本 以 特殊 的 方式 显示 ， 常 用 的 文本 格式 化 标签 如 表 2-1 所 示 。 


表 2-1 常用 的 文本 格式 化 标签 


标 签 显示 效果 
<b></b> 和 <strong></strong> 文本 以 粗 体 方式 显示 ，b 定义 文本 为 粗 体 ，strong 定义 强调 文本 
<i></ 放 和 <em></em> 文本 以 斜体 方式 显示 ，i 定义 文本 斜体 ，em 定义 强调 文本 
<s></s> 和 <del></del> 文本 以 加 删除 线 方式 显示 (HTMLS5 不 赞成 使 用 <s></s>) 
<U></u> 和 <ins></ins> 文本 以 加 下 夯 线 方式 显示 (HTMLS5 不 赞成 使 用 <u></u>) 
<mark></mark> 文本 高 亮 显 示 
<cite></cite> 创建 一 个 引用 标记 ， 被 标记 的 文本 以 斜体 显示 


【 例 2-1-2) 文本 格式 化 标签 的 使 用 。 本 例 在 浏览 器 中 的 显示 效果 如 图 2-3 所 示 ， 页 面 文件 
2-1-2.html 的 代码 如 下 。 


<!IDOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 文 本 格式 化 标签 的 使 用 <jtitle> 
</head> 


<body> 
<p> 正 常 显示 的 文本 </p> 
<p><b> 使 用 b 标签 定义 的 加 粗 文本 </b></p> 
<p><strong> 使 用 strong 标签 定义 的 强调 文本 </strong></p> 
<p>< 记 使 用 i 标签 定义 的 斜体 文本 </i></p> 
<p><em> 使 用 em 标签 定义 的 强调 文本 </em></p> 
<p><del> 使 用 del 标签 定义 的 删除 线 文本 </del></p> 
<p><ins> 使 用 ins 标签 定义 的 下 夯 线 文本 </ins></p> 
<p>HTMLS5 的 设计 目的 是 <mark> 在 移动 设备 上 支持 多 媒体 。</mark></p> 
<p> 时 间 是 一 切 财 富 中 最 宝贵 的 财富 。<cite> 一 一 德 奥 弗 拉 斯 多 </cite></p> 


和 ie 
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正常 显示 的 文本 
使 用 b 标 签 定义 的 加 粗 文本 
使 用 strong 标 签 定义 的 强调 文本 


钨 而 em 上 符 宦 以 jy 强 站 二 

使 用 de 标签 定义 的 肝 除 线 交 本 
使 用 ins 标 签 定义 的 下 划 绪 文本 
HTML5 的 设计 日 的 是 为 了 姓 二 可 到 守 多 开 开 到 
时 间 是 一 切 财 襄 中 最 宝贵 的 财 言 。 一 一 苞 乱 这 加 饭 交 


图 2.3 文本 格式 化 标签 显示 效果 


2.1.7 ”<span>( 范 围 标签 ) 

在 设计 网 页 时 ， 有 时 需要 对 一 个 段落 内 的 某 些 元 素 进 行 单独 设计 ， 这 时 就 可 以 用 <span> 标 
签 来 组 合 这 些 内 容 元 素 ， 形 成 行内 的 一 个 区 域 ， 从 而 实现 某 种 特定 效果 。 

<span> 与 </span> 之 间 只 能 包含 文本 和 各 种 行内 标签 ， 用 来 定义 网 页 中 某 些 特殊 显示 的 文 
本 ， 配 合 class 属性 使 用 。 它 本 身 没有 固定 的 格式 表现 ， 只 有 应 用 样式 时 ， 才 会 产生 视觉 上 的 变化 。 

例如 : 对 一 段 内 的 个 别 文字 定义 “红色 、 加 粗 ” 效 果 。 


<p>HTMLS5 的 设计 目的 是 在 <span style="color:red: font-weight:800:"> 移 动 设备 上 </span> 支 持 多 媒体 。</p> 


2.1.8 “<!--…-->( 注 释 标签) 


为 了 增强 代码 的 可 读 性 , 可 以 在 HTML 中 添加 一 种 特殊 的 标签 一 一 注释 标签 , 这样 便于 阅 
读 和 理解 。 注 释 标签 不 会 显示 在 页 面 中 ， 只 有 在 编辑 器 或 打开 源 代码 时 才 可 见 。 其 基本 语法 格 
式 如 下 。 


<!- 注释 内 容 -> 
注释 内 容 可 以 为 一 行 ， 也 可 以 为 多 行 ， 并 且 开 始 标签 和 结束 标签 可 以 不 在 一 行 上 。 


2.1.9 特殊 符号 


要 在 网 页 中 显示 一 些 包 含 特殊 字符 的 文本 ， 如 “>” 和 “<” 等 ， 必 须 使 用 相应 的 HIML 
代码 来 表示 ， 这 些 特殊 符号 对 应 的 代码 被 称 为 字符 实体 。 字 符 实体 以 “&” 开头， 以 “;” 结 尾 。 
常用 的 特殊 符号 对 应 的 代码 如 表 2-2 所 示 。 
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表 2-2 常用 特殊 字符 的 表示 


特殊 符号 描 述 字符 的 代码 

空格 符 &nbsp: 

< 小 于 号 &lt 

> 大 于 号 Rpt: 

& 和 号 Kamp: 

¥ 人 民 币 Ryen: 

bd 版 权 &copy: 

be 注册 商标 Rreg: 

摄氏 度 Cdeg: 

圭 正 负 号 &plusmn: 

又 


2.1.10 ”案例 制作 


在 HBuilder 的 项 目 文件 下 ， 新 建 HTML 文件 2-1.html， 关 键 代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title> 加 盟 中 心 </tite> 
</head> 
<body> 
<h3> 加 盟 中 心 <h3> 
<hr size="3" noshade="noshade"/> 
<h4> 合 作 项 目 </h4> 
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp:&nbsp: 开 展 新 款 < 户 洗 墙 灯 、LED 点 光源 、LED 投 光 灯 、LED 
路 灯头 < 人 > 等 户外 灯具 批发 和 灯饰 招商 加 盟 项 目 。</p> 
<h4> 加 盟 理由 </h4> 
<p>&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:1. 网 店 代销 灯具 批发 的 市 场 前 景 广阔 。<br> 
&nbsp&nbsp:&nbsp:&mnbsp:&nbsp:&nbsp:2. 成 本 低 ， 风 险 低 ， 利 润 高 ， 是 现在 创业 从 商 的 最 好 选择 ! <br> 
&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:3. 我 们 通过 淘宝 分 销 平台 的 灯具 批发 ， 全 力 打造 一 个 网 店 代 
销 的 商业 联盟 ， 共 同 创业 ! 


<p> 
<h4> 加 盟 热线 <h4> 
<p>&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp: 全 国 灯具 批发 加 盟 热线 : <strong><i>400-180-6788 . 
400-180-6789</i></strong></p> 
</body> 
【说 明 】 为 了 实现 缩 格 效果 ， 使 用 了 空格 符号 。 
在 浏览 器 中 浏览 网 页 ， 显 示 效 果 如 图 2-1 所 示 。 


fis 
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图 像 标签 


图 像 是 网 页 中 不 可 缺少 的 内 容 ， 可 以 作为 文档 内 容 、 超 链接 和 背景 等 加 入 页 面 ， 使 页 面 更 
加 丰富 多 彩 。 


2.2.1 ”案例 分 析 


【案例 展示 】 新 闻 动 态 -资讯 详情 局 部 页 面 的 设计 。 
使 用 图 像 标 签 、 标 题 标签 和 段落 标签 等 ， 完 成 资讯 详情 局 部 页 面 的 设计 ， 本 例文 件 2-2.html 
在 浏览 器 中 的 显示 效果 如 图 2-4 所 示 。 


C | © 127.0.0.18020/AladLed/chapter02/2-2html?_hbt=1552662162284 


以 LED 照 明代 昔日 光 ， 科 学 家 在 南极 成 功 种 植 蔬菜 
2018-04-10 09:17 


科学 家 们 基于 水 栽培 法 ， 使 用 可 更 复 使 用 的 水 循环 与 营养 系统 ， 同 时 ， 以 LED 照 明代 蔡 日 光 ， 并 仔细 监控 室内 的 二 氧化 碳 。 


德国 位 于 南极 的 诺 伊 迈 尔 三 号 站 (Neumayer Station ID 的 科学 家 ， 
于 室外 温度 低 于 -20"C 的 条 件 下 ， 在 高 科技 温室 (EDEN-ISS) 成 功 种 

” 出 了 无 需 泥土 、 日 光 及 农药 的 蔬菜 ， 包 括 3.6 千 克 色 拉 生 菜 、18 条 
黄瓜 和 70 桥 小 劳 卜 。 


据 了 解 ， 科 学 家 们 基于 水 栽培 法 ， 使 用 可 重复 使 用 的 水 循环 与 营养 
系统 ， 同 时 ， 以 LED 照 明代 莹 日 光 , 并 仔细 监控 室内 的 二 氧化 碳 ， 
此 外 ， 据 德国 航空 中 心 介绍 ,到 5 月 前 ， 科 学 家 有 望 每 周 收 成 4.5 干 
克 水 果 和 蔬菜 。 


但 值得 注意 的 是 ， 该 项 目 聚 焦 于 未 来 到 火星 或 月 球 等 种 植 更 加 丰富 
的 贾 苹 品种， 包括 劳 卜 、 色 拉 用 的 绿叶 荐 菜 、 音 茄 、 黄 瓜 、 羡 概 、 甚 至 是 药草 。 不 过 这 样 的 栽种 系统 也 有 其 限制 ， 科 学 家 表示 
有 的 蔬果 要 等 很 久 才 成 熟 ， 例 如 草 蓝 ， 他 们 现在 邦 还 在 等 一 次 成 功 的 收成 。 


图 2-4 新闻 动 态 资讯 详情 局 部 页 面 


【知识 要 点 】 图 像 标 签 的 定义 、 图 像 属性 的 设置 、 图 文 混 排 。 
【学 习 目 标 】 掌 握 图 像 格式 的 设置 和 图 文 混 排 技术 。 


2.2.2 ”常用 图 像 格式 


网 页 图 像 有 三 种 常用 的 格式 : GIF、PNG 和 JPG， 具 体 区 别 如 下 。 

(CD GIF 格式 

GIF 格式 最 突出 的 特点 就 是 它 支持 动画 ， 另 外 ， 它 也 是 一 种 无 损 的 图 像 格式 。GIF 格式 支 
持 透 明 (全 透明 或 全 不 透明 )， 因 此 很 适合 在 互联 网 上 使 用 。 

GIF 格式 文件 最 多 使 用 256 种 颜色 ， 适 合 显示 色调 不 连续 或 具有 大 面积 单一 颜色 的 图 像 ， 
如 LOGO、 小 图 标 及 其 他 色彩 相对 单一 的 图 像 。 

(C) PNG 格式 

PNG 格式 是 一 种 替代 GIF 格式 的 无 专利 权限 制 的 格式 。 相 对 于 GIF 格式 ，PNG 格式 最 大 
的 优势 是 体积 更 小 ， 支 持 alpha 透明 (全 透明 、 半 透明 、 全 不 透明 )， 并 且 颜 色 过 渡 更 平滑 ， 但 
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PNG 格式 不 支持 动画 。 它 包括 对 索引 色 、 灰 度 、 真 彩色 图 像 以 及 alpha 通道 透明 的 支持 。 

(3) JPG 格式 

JPG 格式 所 能 显示 的 颜色 比 GIF 格式 和 PNG 格式 要 多 得 多 ， 可 以 用 来 保存 超过 256 种 颜 
色 的 图 像 , 但 JPG 格式 是 一 种 有 损 压 缩 的 图 像 格式 。 JPG 格式 主要 用 于 摄影 或 者 连续 色调 图 像 ， 
随 着 文件 品质 的 提高 ， 文 件 的 容量 也 随 之 提高 ， 下 载 速度 也 会 受 影响 。 


2.2.3 图像 标签 及 其 属性 


在 HTML 网 页 中 显示 图 像 就 需要 使 用 图 像 标 签 , 接 下 来 将 详细 介绍 图 像 标签 <img/> 及 其 相 
关 属 性 。 其 基本 语法 格式 如 下 。 
<img src= "图 像 URL"” width= "图 像 宽度 ” height= "图 像 高 度 ” alt= "替代 文字 " border= "边框 宽度 " 
align= "对 齐 方式 ” title=" 文 字 "” hspace=" 空 白 宽度 " vspace=" 空 白 高 度 " 广 
属性 介绍 如 下 。 
src: 用 于 指定 图 像 文 件 的 路 径 和 文件 名 ， 是 标签 的 必需 属性 。 
width: 设置 图 像 的 显示 宽度 ， 单 位 是 像素 或 百分比 。 
height: 设置 图 像 的 显示 高 度 ， 单 位 是 像素 或 百分比 。 
alt: 图 像 不 能 显示 时 ， 代 蔡 图 像 的 说 明文 字 。 
border: 设置 图 像 边 框 的 宽度 ， 单 位 是 像素 。 
align: 设置 图 像 的 对 齐 方式 ， 取 值 为 left、center 和 right。 
tile: 鼠标 指向 图 片 时 ， 显 示 的 提示 文字 。 
hspace: 定义 图 像 左 侧 和 右 侧 的 空白 。 
vspace: 定义 图 像 项 部 和 底部 的 空白 。 
下 面 详细 介绍 各 个 属性 的 具体 功能 和 用 法 。 


1. 指定 图 像 的 大 小 


如 果 不 给 图 像 设 置 宽度 和 高 度 , 图 像 就 会 按照 它 的 原始 尺寸 来 显示 。 可 以 用 width 和 height 
属性 来 定义 图 像 的 宽度 和 高 度 ， 指 定 图 像 的 大 小 。 
在 设置 图 像 的 大 小 时 ， 通 常 我 们 只 设置 其 中 的 一 个 ， 另 一 个 会 按 原 图 等 比例 显示 。 如 果 同 
时 设置 两 个 属性 ， 且 其 比例 和 原 图 大 小 的 比例 不 一 致 ， 显 示 的 图 像 就 会 变形 或 失真 。 
width 和 height 可 以 是 像素 值 ， 也 可 以 是 百分比 值 。 如 果 用 百分比 值 表 示 ， 则 意味 着 显示 的 
图 像 大 小 为 浏览 器 窗口 大 小 的 百分比 。 
【 例 2-2-1) 设置 图 像 大 小 。 本 例 在 浏览 器 中 的 显示 效果 如 图 2-5 所 示 ， 页 面 文件 2-2-1.html 
的 关键 代码 如 下 。 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 图 像 大 小 </title> 
</head> 


<body> 
<img src="img/led jgd1.jpg" alt=" 景 观 路 灯 图 片 "> 
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<img src="img/led jgdl jpg" alt=" 景 观 路 灯 图 片 ”width="300"/> 
<p> 景 观 灯 是 现代 景观 中 不 可 缺少 的 部 分 ， 它 不 仅 自身 具有 较 高 的 观赏 性 ， 还 强调 艺术 灯 的 景观 与 景 
区 历史 文化 、 周 围 环境 的 协调 统一 。</p> 


</body> 
</htnl> 


在 图 2-5 中 ， 左 侧 的 图 没有 指定 大 小 ， 按 原始 大 小 显示 ; 右 侧 的 图 指定 宽度 为 200px， 高 
度 也 按 等 比例 显示 。 


po ete ddd 它 不 仅 自身 具有 较 高 的 观 党 性， 还 强调 艺术 灯 的 景观 与 景区 ‖ 
历史 文化 、 周 围 环境 的 协调 统一 


图 2-5 设置 图 像 大 小 


2. 指定 图 像 的 替换 文本 


由 于 某 些 原 因 图 像 可 能 无 法 正常 显示 ， 比 如 图 片 丢 失 、 浏 览 器 版 本 过 低 、 网 络 过 忙 等 ， 这 
时 用 户 就 不 能 在 浏览 器 中 看 到 图 像 。 在 图 像 无 法 显示 时 , 可 以 在 图 像 位 置 显示 由 alt 属性 指定 的 
替换 文本， 告诉 用 户 有 关 该 图 像 的 信息 。 

【 例 2-2-2】 设置 图 像 蔡 换文 本 。 修 改 例 2-2-1 的 代码 ， 把 第 一 个 <img> 标 签 的 内 容 改 成 如 下 
代码 ， 本 例文 件 2-2-2.html 在 浏览 器 中 的 显示 效果 如 图 2-6 所 示 。 


<img src="img/led jgdl.gif' alt=" 景 观 路 灯 图 片 "上 > 
因为 图 像 文件 img/led jgd1.gif 不 存在 ， 所 以 在 图 像 位 置 显示 alt 属性 指定 的 蔡 换文 本 。 
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3. 指定 图 像 的 边框 
默认 情况 下 , 图 像 是 没有 边框 的 , 这 显得 有 些 单调 。 通过 border 属性 可 以 为 图 像 添加 边框， 
设置 边框 的 宽度 ， 添 加 边框 后 的 图 像 显 得 更 醒目 、 美 观 。 边 框 的 颜色 默认 为 黑色 ， 不 可 调整 。 
【 例 2-2-3】 给 图 像 设 置 边 框 。 修 改 例 2-2-2 的 代码 ， 为 图 像 设置 宽度 为 2px 的 边框 。 本 例 
文件 2-2-3 html 在 浏览 器 中 的 显示 效果 如 图 2-7 所 示 ， 修 改 后 的 代码 如 下 。 
<body> 
<img src="img/led jsdljpg" alt=" 景 观 路 灯 图 片 " width="200" border="2"/> 
<p> 景 观 灯 是 现代 景观 中 不 可 缺少 的 部 分 ， 它 不 仅 自 身 具 有 较 高 的 观赏 性 ， 还 强调 艺术 灯 的 景观 与 景区 
历史 文化 、 周 围 环境 的 协调 统一 。</p> 


站 图 像 营 撞 文本 \ 
© © file///E/AladLed/cha... 
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景观 灯 是 现代 景观 中 不 可 缺少 的 部 分 ， 它 不 仅 景观 灯 是 现代 景观 中 不 可 缺少 的 部 分 ， 它 不 仅 自 
自身 具有 较 高 的 观赏 性 ， 还 强调 艺术 灯 的 景观 身 具 有 较 高 的 观赏 性 ， 还 强调 艺术 灯 的 景观 与 景 
与 景区 历史 文化 、 周 围 环境 的 协调 统一 。 区 历史 文化 、 周 围 环境 的 协调 统一 。 


图 2-6 “设置 图 像 蔡 换文 本 图 2.7 设置 图 像 边框 


4. 指定 图 像 的 对 齐 方式 

图 文 混 排 在 网 页 中 很 常见 ， 指 的 是 图 像 与 同一 行 中 的 图 像 、 文 本 、 插 件 或 其 他 元 素 的 对 齐 
方式 。 默 认 情况 下 ， 图 像 的 底部 会 相对 于 文本 的 第 一 行文 字 对 齐 。 但 是 在 制作 网 页 的 过 程 中 ， 
有 时 需要 实现 图 像 和 文字 的 环绕 效果 ， 这 就 需要 使 用 图 像 的 对 齐 属性 align。 

【 例 2-2-4】 设 置 图 像 靠 左 、 文 字 居 右 的 图 文 混 排 效果 。 修 改 例 2-2-3 的 代码 ， 为 img 标签 
应 用 align="left" 属 性 。 本 例文 件 2-2-4.html 在 显示 器 中 的 浏览 效果 如 图 2-8 所 示 , 修改 后 的 代码 
如 下 。 

<img stc="img/led jgd1 jpe" width="200" border="2" align="left' hspace="10"/> 

为 了 使 页 面 美观 ， 设 置 hspace="10"， 使 图 片 左 右 各 留 出 10 像素 的 空白 。 
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图 2-8 设置 图 像 的 对 齐 方式 


2.2.4 ”绝对 路 径 与 相对 路 径 


在 计算 机 中 查找 文件 时 ， 需 要 知道 文件 的 位 置 ， 文 件 的 位 置 就 是 路 径 。 网 页 中 的 路 径 通常 
分 为 两 种 : 绝对 路 径 和 相对 路 径 。 


1. 绝对 路 径 


绝对 路 径 是 包括 通信 协议 名 、 服 务 器 名 、 路 径 及 文件 名 的 完整 路 径 ， 是 网 页 上 的 文件 或 目 
录 在 硬盘 上 的 真正 路 径 ， 如 网 络 地 址 “http:/ www.sina.conyimages/logo.gif” 就 是 绝对 路 径 ，D 
盘 html5/images 目录 下 文件 logo.gif 的 绝对 路 径 是 “file:///D:/html5/images/logo.gif”。 

网 页 中 不 推荐 使 用 绝对 路 径 ， 因 为 网 页 制作 完成 后 需要 将 所 有 的 文件 上 传 到 服务 器 。 这 时 
图 像 文件 可 能 被 存放 在 服务 器 的 C 盘 , 也 有 可 能 是 在 D 盘 或 E 盘 , 可 能 是 在 a 文件 夹 中 , 也 有 
可 能 是 在 b 文件 夹 中 。 也 就 是 说 ， 很 有 可 能 不 存在 “D:\html5\images\logo.gif” 这 样 一 条 路 径 。 


2. 相对 路 径 


相对 路 径 就 是 相对 于 当前 文件 的 路 径 , 相对 路 径 不 带 盘 符 , 通常 以 HTML 网 页 文件 为 起 点 ， 
通过 层级 关系 来 描述 目标 文件 的 位 置 。 

相对 路 径 的 设置 分 为 以 下 3 种 。 

(D 图 像 文件 和 HTML 文件 位 于 同一 文件 夹 : 只 需要 输入 图 像 文件 的 名 称 即 可 ， 如 <img 
src="logo. gif' />。 

(2) 图 像 文件 位 于 HTML 文件 的 下 一 级 文件 夹 : 输入 文件 夹 名 和 文件 名 ， 之 间 用 “/” 隔 
开 ， 如 <img src="images/logo.gif' />。 

(3) 图 像 文件 位 于 HTML 文件 的 上 一 级 文件 夹 : 在 文件 名 之 前 加 入 “./”， 如 果 是 上 两 级 ， 
则 需要 使 用 “././”， 以 此 类 推 ， 如 <img strc="../logo.gif' />。 


2.2.5 “案例 制作 
【案例 : 资讯 详情 局 部 页 面 】2-2 .html 文档 的 关键 代码 如 下 。 
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<head> 
<meta charset="utf-8"> 
<title> 新 闻 动 态 -资讯 详情 </title> 
</head> 
<body> 
<h4 align="center"> 以 LED 照明 代替 日 光 ， 科 学 家 在 南极 成 功 种 植 蔬菜 </h4> 
<h5 align="center">2018-04-10 09:17</h5> 
<p> 科 学 家 们 基于 水 栽培 法 ， 使 用 可 重复 使 用 的 水 循环 与 营养 系统 ，.…… </p> 
<img src="img/pro_infojpg" width="400" alt=" 科 学 家 在 南极 成 功 种 植 蔬菜 " align="left" hspace="10"/> 
<p> 德 国 位 于 南极 的 诺 伊 迈 尔 三 号 站 (Neumayer Station ID 的 科学 家 ， .…… <Pp> 
<p> 据 了 解 ， 科 学 家 们 基于 水 栽培 法 ， 使 用 可 重复 使 用 的 水 循环 与 …..… </p> 
<p> 但 值得 注意 的 是 ， 该 项 目 聚 焦 于 未 来 到 火星 或 月 球 等 种 植 更 加 丰 .…… </p> 
‘</body> 
【说 明 】 因 为 版 面 控制 ,案例 中 应 该 显示 的 文本 在 此 没有 全 部 显示 出 来 。 完整 代 码 请 参考 教 
材 配 套 的 源 代码 。 
浏览 网 页 ， 可 以 看 到 显示 效果 如 图 2-4 所 示 。 


各 个 网 页 链接 在 一 起 ， 才 能 真正 构成 一 个 网 站 ， 进 一 步 实现 互联 网 上 各 种 资源 的 共享 ， 而 
各 个 网 页 链接 就 是 通过 超 链接 实现 的 。 


2.3.1 案例 分 析 


【案例 展示 】 链 接 案例 一 网 站 信息 页 面 。 

使 用 页 面 间 链 接 、 网 站 间 链 接 、 可 下 载 文件 链接 等 知识 ， 制 作 网 站 信息 页 面 。 当 单 击 “加 
盟 中 心 ” 时， 打开 如 图 2-1 所 示 的 加 盟 中心 页 面 ， 当 单 击 “ 资 讯 详情 ”时 ， 打 开 如 图 2-4 所 示 
的 资讯 详情 页 面 ， 当 单 击 “ 百 度 搜索 ”时 ， 打 开 百 度 网 站 首页 ， 当 单 击 “ 合 作协 议 ” 时 ， 下 载 
合作 协议 文件 。 本 例文 件 2-3.html 在 浏览 器 中 的 显示 效果 如 图 2-9 所 示 。 


@fileWE/- 女王 


图 2-9 链接 案例 
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【知识 要 点 】 超 链接 的 定义 ， 页 面 间 链 接 、 网 站 间 链 接 、 下 载 文件 链接 等 。 
【学 习 目标 】 掌 握 各 种 超 链接 的 应 用 场合 和 实现 技术 。 


2.3.2” 超 链接 简介 

一 个 完整 的 超 链 接 包 括 两 部 分 :链接 的 载体 和 链接 的 目标 地 址 。 链 接 的 载体 指 的 是 显示 链 
接 的 部 分 ， 可 以 是 文字 或 图 像 。 链 接 的 目标 是 指 单 击 超 链接 后 显示 的 内 容 ， 可 以 是 其 他 网 页 、 
图 像 、 多 媒体 、 电 子 邮件 地 址 、 可 下 载 文件 和 应 用 程序 等 。 

在 HTML 中 创建 超 链接 非常 简单 ， 只 需要 用 <a> 和 </a> 标 签 环 绕 需要 被 链接 的 对 象 即 可 ， 
其 基本 语法 格式 如 下 。 

<ahreE-url target=" 窗 口 名 称 "> 超 文本 </a> 

在 上 面 的 语法 中 ，<a> 标 签 用 于 定义 超 链 接 ，href 和 target 为 其 常用 属性 。 

e href: 用 于 指定 链接 目标 的 URL 地 址 。 需 要 创建 空 链接 时 ， 用 “#” 代 蔡 URL。 

e target: 用 于 指定 链接 页 面 的 打开 方式 ， 常 用 的 取 值 有 _self 和 _blank 两 种 ， _self 为 默 

认 值 ， 意 为 在 原 窗口 中 打开 ，_blank 意 为 在 新 窗口 中 打开 。 

【 例 2-3-1] 超 链接 示例 。 单 击 网 页 上 的 “百度 ”文本 , 打开 百度 网 站 首页 。 页 面 文件 2-3-1html 
的 关键 代码 如 下 。 

<a href-"https:/www baidu.com" target"” blank"> 百 度 </a> 

在 例 2-3-1 中 ， 链 接 文本 “百度 ”显示 为 蓝 色 且 带 有 下 画 线 。 属 性 href 指定 链接 目标 网 址 
是 “https://www.baidu.com”。 属 性 target=" blank" 定 义 链接 页 面 在 新 窗口 中 打开 。 当 鼠标 移 到 
链接 文本 上 时 ， 光 标 变 为 小 手 的 形状 ， 同 时 页 面 的 左下 方 会 显示 链接 页 面 的 地 址 。 当 单 击 链接 
文本 “百度 ”时 ， 会 在 新 窗口 中 打开 百度 网 站 首页 。 

超 链 接 标 签 本 身 有 默认 的 显示 样式 ， 即 蓝 色 且 带 有 下 画 线 效果 。 


2.3.3 ”起 链接 的 应 用 


1. 站 内 页 面 间 的 链接 (站 内 链接 ) 

同一 网 站 域名 下 的 各 页 面 间 可 以 用 超 链接 实现 相互 间 的 访问 。 

例如 ， 在 首页 以 外 的 其 他 页 面 上 ， 单 击 超 链接 “首页 ”返回 网 站 首页 ， 其 代码 如 下 。 
<a href="index.html" target-” self'> 首 页 </a> <br> 

注意 ， 站 内 链接 尽量 使 用 相对 路 径 。 

2. 网 站 间 的 链接 


不 同 网 站 间 可 以 通过 超 链接 实现 信息 和 资源 的 共享 。 
例如 ， 在 网 页 上 单 击 超 链接 “163 邮箱 ”打开 163 网 易 邮 箱 首 页 ， 其 代码 如 下 。 
<a href="https://mail.163.com" target=" blank">163 邮箱 </a> ”<br> 


通过 超 链接 ， 也 可 以 链接 到 其 他 网 站 的 网 页 上 。 
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例如 ， 单 击 超 链接 “百度 百科 -- 超 链接 ”打开 百度 百科 网 站 上 关于 超 链 接 介绍 的 页 面 ， 其 
代码 如 下 。 
<a href- "https:/Wbaike baidu.conyitem/96E896B6968596E9969396BE%6E69%68E%6AS/97857?fr=-aladdin" 
target=”blank"> 百 度 百科 -- 超 链接 </a> ”<br> 


3. 媒体 链接 

超 链接 除了 可 链接 文本 外 ， 也 可 链接 各 种 媒体 ， 如 声音 、 图 像 和 动画 等 ， 通 过 它们 可 以 将 
网 站 建设 成 一 个 丰富 多 彩 的 多 媒体 世界 。 

例如 ， 单 击 超 链接 “MP4 视频 ”打开 视频 文件 并 开始 播放 ， 其 代码 如 下 。 

<a href="media/movie.mp4" target=" blank">MP4 视频 </a> ”<br> 


注意 : 
只 有 当 项 目 文件 夹 的 media 目录 中 有 movie mp4 文件 时 ， 才 能 单 击 播放 。 


4. 下 载 链接 


当 需 要 在 网 站 中 提供 资料 下 载 时 ， 可 以 为 资料 文件 提供 下 载 链接 。 如 果 超 链接 指向 的 不 是 
一 个 网 页 文件 ， 而 是 其 他 文件 ， 如 doc、xls、zip 和 rar 文件 等 ， 单 击 链接 时 就 会 下 载 相 应 的 
文件 。 

例如 ， 单 击 超 链接 “合作 协议 下 载 ”， 开 始 下 载 文件 ， 其 代码 如 下 。 

<ahre 人 "datum/ 合 作协 议 .zip"> 合 作协 议 下 载 <a> <br> 


注意 : 
只 有 当 项 目 文件 夹 的 datum 目录 中 有 “合作 协议 .zip” 文 件 时 ， 才 能 单 击 下 载 。 


5. 用 图 像 做 超 链 接 


为 了 增加 页 面 的 美观 性 ， 有 时 用 图 像 代替 文字 做 超 链 接 。 

例如 ， 将 超 链接 中 的 “首页 ” 超 文 本 用 图 片 进行 蔡 换 ， 其 代码 如 下 。 

<a href="index html" target=" self'><img src="img/navl.gif'> <a> <br> 

在 低 版 本 的 正 浏览 器 中 , 这样 做 会 给 链接 图 像 添加 边框 效果 ， 要 去 掉 链接 图 像 的 边框 ， 只 
需要 将 边框 定义 为 0 即 可 。 


6. 锚 记 链接 


在 浏览 网 页 时 ， 如 果 页 面 内 容 较 多 ， 篇 幅 较 长 ， 就 需要 不 断 地 拖 动 滚动 条 来 查看 所 需要 的 
内 容 , 这 样 效率 较 低 且 不 方便 。 为 了 提高 信息 的 检索 速度 ,可 以 创建 锚 记 链 接 (也 称 为 书签 链接 ) 
来 实现 。 通 过 单 击 锚 记 链接 ， 可 以 快速 定位 到 目标 内 容 ， 方 便 浏 览 。 

创建 锚 记 链接 ， 需 要 以 下 两 个 步骤 。 

(1) 定义 锚 记 名 称 。 
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格式 1: <aname=" 锚 记名 "> 目标 附近 的 文本 </a> 

格式 2: <Eid="id 名 "> 网 页 内 容 ..….</E>，E 代表 HIML 标签 ， 如 p、hn、div 等 。 

(2) 定义 锚 记 链接 。 单 击 超 文本 时 ， 会 跳 转 到 锚 记 名 或 id 名 开始 的 位 置 。 

格式 : <a hre 伍 "# 铺 记名 | 溺 d 名 "> 超 文 本 </a> 

下 面 通过 一 个 具体 的 案例 来 演示 在 页 面 中 创建 锚 记 链接 的 方法 。 

【 例 2-3-2】 锚 记 链接 示例 。 创 建 唐诗 赏析 页 面 ， 如 图 2-10 所 示 ， 单 击 目录 中 的 唐诗 名 称 超 
链接 ， 跳 转 到 相应 的 唐诗 内 容 部 分 ， 如 图 2-11 所 示 。 单 击 “ 返 回 目录 ” 超 链 接 ， 则 跳 转 到 目录 
部 分 。 页 面 文件 2-3-2.html 的 关键 代码 如 下 。 


<body> 
<h2 align="center" id="mulu"> 目 录 </h2> 
<p><ahre 全 "fxln"> 行 路 难 -李白 </a><br><br> 
<a hre 伍 "者 yj"> 九 月 九 日 忆 山 东 兄弟 -- 王 维 </a><br/><br/> 
<a href="#fll" > 芙蓉 楼 送 辛 渐 -- 王 昌 龄 <a><br 户 </p> 
<hr> 
<h3 align="center"><a name="xln"> 行 路 难 </a> </h3> 
<p align="center" > 李白 <p> 
<p align="center"><strong> 金 构 清 酒 斗 十 千 ， 玉 盘 珍 饶 直 万 钱 。<br/> 
停 杯 投 筹 不 能 食 ， 拔 剑 四 顾 心 茫然 。 <br> 
欲 渡 黄河 冰 塞 川 ， 将 登 太 行 雪 暗 天 。 <br> 
闲 来 垂钓 坐 溪 上 ， 忽 复 乘 舟 梦 日 边 。 <br> 
行路 难 ， 行 路 难 ， 多 歧路 ， 今 安 在 。 <br/> 
长 风 破 浪 会 有 时 ， 直 挂 云 帆 济 沧海 。 </strong> 
<p> 
<p><strong>【 注 释 】 </strong><br> 
@D 珍 馆 : 名 贵 的 菜肴。 <br> 
@ 重 钓 坐 溪 上 : 传说 吕 尚 未 遇 周 文王 时 ， 曾 在 溪 ( 今 陕西 宝鸡 市 东南 ) 垂 钓 。 <br> 
@ 乘 舟 梦 日 边 : 传说 伊 尹 见 汤 以 前 ， 梦 乘 舟 过 日 月 之 边 。 合 用 这 两 名 典故， 是 比喻 人 生 遇 合 无 常 ， 
多 出 于 偶然 。 
<p> 
<p><strong>【 简 析 】 </strong><br/> 
“行路 难 ” 多 写 世 道 艰 难 ， 表 达 离 情 别 意 。 李 白 《 行 路 难 》 共 三 首 ， 菇 塘 退 士 辑 选 其 一 。 诗 以 “ 行 
路 难 ” 比 喻 世道 险阻 ， 抒 写 了 诗人 在 政治 道路 上 唱 遇 艰难 时 ， 产 生 的 不 可 抑制 的 激愤 情绪 ， 但 他 并 
未 因此 而 放弃 远大 的 政治 理想 ， 仍 盼 着 总 有 一 天 会 施展 自己 的 抱负 ， 表 现 了 他 对 人 生前 途 乐 观 豪 
迈 的 气概 ， 充 满 了 积极 浪漫 主义 的 情调 。 全 诗 在 高 度 仿 律 与 大 量 感叹 之 后 ， 以 “长 风 破浪 会 有 时 ” 
忽 开 异 境 ， 并 且 坚 信 美 好 前 景 终 会 到 来 ， 因 而 “ 直 挂 云 帆 济 沧海 ”， 激 流 勇 进 。 蕴 意 波澜 起 伏 ， 跌 
宕 多 姿 。</p> 
<p align="right"><a href=" 提 nulu"> 返 回 目录 </a></p> 
<h> 
<h3 align="center"><a name="jyj"> 九 月 九 日 忆 山东 兄弟 </a> </h3> 
<p align="center"> 王 维 </p> 
<p align="center"><strong> 
独 在 异乡 为 异 客 ， 每 御 佳 节 倍 思 亲 。<br> 
遥 知 兄弟 登高 处 ， 遍 插 荣 黄 少 一 人 。 <br> 
</strone></p> 
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<p><strong>【 注 释 】 </strong><br> 
登高 ， 九 月 九重 阳 节 ， 民 间 有 登高 避邪 习俗 。 <br> 
荧 黄 : 药性 植物 。 重 九 俗 以 结子 荣 黄 枝 插头 。 </p> 
<p><strong>【 简 析 】 </strong><br> 
诗 写 游子 思乡 怀 亲 。 诗 人 一 开头 便 紧急 切 题 ， 写 异乡 异 土生 活 的 孤独 凄然 ， 因 而 时 时 怀 乡 思 人 
遇 到 佳节 良 搬 ， 思 念 倍加 。 接 着 诗 一 跃 而 写 远 在 家 乡 的 兄弟 ， 按 照 重阳 的 风俗 而 登高 时 ， 也 在 怀 
念 自己 。 诗 意 反复 跳跃 ， 含 蓄 深 沉 ， 既 朴素 自然 ， 又 曲折 有 致 。“ 每 逢 佳节 倍 思 亲 ”， 千 百年 来 ， 
成 为 游子 思念 的 名 言 ， 打 动 多 少 游子 离 人 之 心 。</p> 
<p align="right"><a hre 伍 "#mulu"> 返 回 目录 </a></p> 
<h> 
<h3 align="center"><a name=" 人 "> 芙蓉 楼 送 辛 渐 </a> </h3> 
<palign="center"> 王 昌 龄 </p> 
<palign="center'><strong> 
寒 雨 连 江 夜 入 吴 ， 平 明 送 客 楚 山 孤 。<br> 
洛阳 亲友 如 相间 ， 一 片 冰心 在 玉 壶 。 <br> 
</strong></p> 
<p><strong>【 注 释 】 </strong><br> 
芙蓉 楼 : 原名 西北 楼 ， 在 润 州 ( 今 江苏 省 镇 江 市 ) 西 北 。<br/> 
辛 渐 : 诗人 的 一 位 朋友 。<br/> 
吴 : 古代 国名 ， 这 里 泛 指 江苏 南部 、 浙 江北 部 一 带 。 江 苏 镇 江 一 带 为 三 国 时 吴 国 所 属 。</p> 
<p><strong>【 简 析 】 </stong><br> 
迷蒙 的 烟雨 ， 连 夜 酒 遍 吴 地 江天 ; 清晨 送 走 你 ， 孤 对 楚 山 离愁 无 限 ! 朋友 啊 ， 洛 阳 亲 友 若 是 问 起 我 
来 ;就 说 我 依然 冰心 玉 壶 ， 坚 守信 念 ! </p> 
<p align="right"><a hre 人 "mulu"> 返 回 目录 </a></p> 
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【注释 ] 
站 珍 诺 : 名 贵 的 菜肴 。 
@@ 重 钓 坐 溪 上 : 传说 虽 尚 未 遇 周文 王 时 ， 普 在 溪 ( 今 陕西 宝鸡 市 东南 ) 生 钓 。 
网 @@ 乘 舟 梦 日 边 : 传说 伊 尹 见 汤 以 前 ， 梦 乖 舟 过 日 月 之 边 。 合 用 这 两 句 典故 ， 是 比喻 人 生 遇 合 无 常 ， 多 出 于 
偶然 。 


图 2-10 唐诗 赏析 网 页 
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九 月 九 日 忆 山 东 兄弟 
王 维 
a 
【注释 】 


登高 : 九 月 九重 阳 节 ， 民 间 有 登高 避 下 习俗 。 
车 黄 ; 药性 植物 。 重 九 俗 以 结子 车 黄 枝 插 头 。 


【 简 析 】 
诗 写 游子 思乡 怀 亲 。 诗 人 一 开头 便 紧 急切 题 ， 写 异乡 异 土生 活 的 珀 独 姜 然 ， 因 而 时 时 怀 乡 思 人 ， 和 到 佳节 
良辰 ， 思 念 倍加 。 接 着 诗 一 跃 而 写 远 在 家 乡 的 兄弟 ， 按 照 重阳 的 风俗 而 登高 时 ， 也 在 怀念 自己 。 诗意 反 香 跑 
跃 ， 含 备 深 沉 ， 既 朴素 自然 ， 又 曲折 有 致 。 “每 种 佳节 倍 思 亲 ” 干 百 年 来 ， 成 为 游子 思念 的 和 名言， 打动 多 少 游 
子 商 人 之 心 。 


芙蓉 楼 送 辛 渐 
王昌龄 


宣 雨 连 江 夜 入 吴 ， 平 明 送 客 楚 山 瑰 。 
洛阳 亲友 如 相间 ,一片 冰 心 在 玉 到 。 


图 2-11 单 击 “ 九 月 九 日 忆 山东 兄弟 ” 后 的 页 面 


【说 明 】 注 释 和 简 析 中 ， 段 首 留 出 的 两 个 汉字 的 空间 是 通过 输入 两 个 全 角 空 格 实现 的 。 
命名 锚 记 时 ， 用 id 名 做 锚 记 名 称 ，id 名 可 以 是 CSS 样式 中 的 id 样式 名 ， 二 者 共用 一 个 id 
名 ， 能 使 页 面 更 简洁 。 


2.3.4 “案例 制作 


【案例 : 链接 案例 -网 站 信息 页 面 】 在 HBuilder 中 的 制作 过 程 如 下 。 
(1) 在 当前 项 目 中 新 建 目录 datum， 把 合作 协议 1.doc 文件 复制 到 该 目录 下 。 
(2) 创建 网 页 结构 文件 ， 在 当前 项 目 中 创建 一 个 HIMLS 网 页 文件 ， 文 件 名 为 2-3.html。 
在 页 面 中 建立 无 序列 表 ， 列 表 项 目 为 图 片 和 文字 ， 其 代码 如 下 。 
<html> 
<head> 
<meta charset="utf-8"> 
<tile> 链 接 案例 -网 站 信息 </title> 
</head> 


<h3> 网 站 信息 </h3> 

<p><a hre 伍 "2-1.html"> 加 盟 中 心 </a></p> 

<p><a hre 人 "2-2.html"> 资 讯 详情 </a></p> 

<hr width="98%%" align="left"> 

<h3> 友 情 链 接 </h3> 

<p><a hre 仁 "https://wwww.baidu.com"> 百 度 搜 索 </a></p> 
<hr width="98%" align="left"> 

<h3> 资 料 下 载 <h3> 

<p><a href="datuny 合 作协 议 1.doc"> 合 作协 议 </a></p> 
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<Jbody> 
</html> 


(3) 在 浏览 器 中 浏览 网 页 ， 可 以 看 到 显示 效果 如 图 2-9 所 示 。 


四 ]】 列表 


列表 是 以 结构 化 、 易 读 化 的 方式 提供 信息 的 方法 。 在 制作 网 页 时 ， 用 列表 制作 的 导航 、 目 
录 和 提纲 等 ， 可 使 文档 结构 条 理 清晰 、 层 次 分 明 ， 传 达 的 信息 更 加 清晰 明确 。 
列表 主要 分 为 无 序列 表 、 有 序列 表 、 定 义 列表 和 其 套 列表 等 。 


2.4.1 案例 分 析 


【案例 展示 】 招 商 加 盟 -合作 方式 局 部 页 面 。 
使 用 多 种 列表 技术 设计 招商 加 盟 -合作 方式 局 部 页 面 ,本 例文 件 2-4.html 在 浏览 器 中 的 显示 
效果 如 图 2-12 所 示 。 
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招商 加 盟 合作 方式 


1. 资本 层面 合作 
。 投资 合作 : 双方 共同 出 资 ， 共 担 风险 ， 共 享 利益 。 
。 合资 : 双方 出 资 建立 有 限 责任 公司 。 
。 甲 方 收购 乙方 在 某 企业 的 股份 。 
2. 交易 合作 
， 甲 方 销售 乙方 产品 
。 甲 方 代理 乙方 产品 
3. 合作 开发 : 双方 出 资 研 发 ， 将 成 果 转 空 给 生产 企业 


加 盟 热线 : 
400-180-6788 张 先生 
400-180-6789 李 先 生 


图 2-12 “招商 加 盟 -合作 方式 局 部 页 面 


【知识 要 点 】 无 序列 表 、 有 序列 表 、 定 义 列表 和 媒 套 列表 。 
【学 习 目标 】 掌 握 各 种 列表 的 使 用 方法 和 列表 嵌 套 技术 。 


2.4.2 无 序列 表 

无 序列 表 是 网 页 中 最 常用 的 列表 。 无 序列 表 的 各 个 列表 项 之 间 没 有 顺序 ， 前 导 符 号 也 没有 
一 定 次 序 ， 而 是 用 圆圈 、 圆 点 和 方块 等 特殊 符号 作为 前 导 符号 。 

定义 无 序列 表 的 基本 语法 格式 如 下 。 


<ul type=" 符 号 类 型 "> 
<I> 列 表 项 1</i> 


和 >o 


第 2 章 网 页 基本 元 素 


< 访 列 表 项 2</ 放 


属性 type 定义 无 序列 表 的 前 导 符号 。 取 值 为 circle( 圆 圈 )、disc( 圆 点 ) 和 square( 方 块 )， 默 认 
说 明 : 在 上 面 的 语法 中 ，<ul></Aul> 标 签 用 于 定义 无 序列 表 ，<li><Mi> 是 具体 的 列表 项 ， 每 
对 <ul></u> 中 至 少 应 包含 一 对 <li></li>。 


注意 : 
在 HIML5 中 ， 不 再 支持 type 属性 。 可 以 用 CSS 样式 来 定义 列表 的 前 导 符号 。 


【 例 2-4-1] 无 序列 表示 例 。 本 例 在 浏览 器 中 的 显示 效果 如 图 2-13 所 示 , 页 面 文件 2-4-1.html 
的 关键 代码 如 下 。 


<body> 
<h3>HTML5 列表 类 型 <h3> 
<uP> 
<Ii> 无 序列 表 </li> 
<l> 有 序列 表 </li> 
<I 访 定义 列表 </li> 
<h> 
</body> 
COfleWE/ | : 
HTML5 列 表 类 型 
。 无 序列 表 
。 有 序列 表 
。 定义 列表 
图 2-13 无 序列 表 
2.4.3 ”有 序列 表 


有 序列 表 中 的 各 个 列表 项 按照 一 定 的 顺序 排列 ， 有 先后 顺序 之 分 ， 它 们 之 间 用 编号 标记 。 
定义 有 序列 表 的 基本 语法 格式 如 下 。 
<ol type=" 符 号 类 型 " start=" 编 号 起 始 值 " reversed="reversed"> 
<I 记 列表 项 1<i> 
<1> 列 表 项 2<i> 


属性 介绍 如 下 。 
e type: 列表 项 的 符号 类 型 ， 取 值 为 1( 阿 拉 伯 数字 )、a( 小 写 英文 字母 )、A( 大 写 英文 字母 )、 
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人 小写 罗马 数字 )、I 大 写 罗 马 数字 )， 默 认 符 号 是 阿拉 伯 数 字 。 
e@ start: 列表 项 编号 的 起 始 值 ， 取 值 为 正 整数 。 默 认 取 值 为 1， 即 编号 从 1 开始 。 
e@ ”reversed: 是 否 对 列表 项 反 向 排序 ， 当 取 值 为 reversed 时 ， 反 向 排序 。 
【 例 2-4-2】 有 序列 表示 例 。 本 例 在 浏览 器 中 的 显示 效果 如 图 2-14 所 示 , 页 面 文件 2-4-2.html 
的 关键 代码 如 下 。 


<h3> 韩 红歌 曲 排 名 </h3> 
<ol start="3"> 
<1i> 灵 魂 走 在 大 街 上 </li> 
<1i> 忠 于 自我 <i> 
<I> 难 忘 雪山 草地 </li> 
<oP> 
<body> 
[ © O127001.. Ni 
韩 红 歌 曲 排名 
3. 灵魂 走 在 大 街 上 
4. 思 于 自我 
5. 难忘 雪山 草地 
图 2-14 有 序列 表 
【说 明 】 因 为 start 属性 的 取 值 为 3， 所 以 列表 项 编号 从 3 开始 。 
2.4.4 定义 列表 


定义 列表 又 称 为 字典 列表 ， 通 常用 于 表示 名 词 或 概念 的 定义 ， 定 义 列表 的 列表 项 前 没有 任 
何 项 目 符号 。 其 基本 语法 为 : 
<d> 
<dC 标 题 1</d> 
<dd> 标 题 1 的 描述 1</dd> 
<dd> 标 题 1 的 描述 2</dd> 


<dP 标 题 2</dP> 
<dd> 标 题 2 的 描述 1</dd> 
<dd> 标 题 2 的 描述 2</dd> 


<d> 

【说 明 】 在 上 面 的 语法 中 ，<d></d> 标 签 指定 定义 列表 ，<dt></de> 标 签 指定 列表 项 的 标题 ， 
<dd></dd> 标 签 对 标题 进行 描述 。<df></d> 和 <dd></dd> 并 列 嵌 套 于 <dl></d> 中 ,一 对 <dt></de> 
可 以 对 应 多 对 <dd></dd>， 即 一 个 标题 可 以 有 多 个 描述 。 


和 :> 
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【 例 2-4-3】 定 义 列表 示例 。 本 例 在 浏览 器 中 的 显示 效果 如 图 2-15 所 示 。 页面 文件 2-4-3.html 
的 关键 代码 如 下 。 
<body> 
<d> 
<dp> 景 观 灯 </de> 
<dd> 景 观 灯 是 现代 景观 中 不 可 缺少 的 部 分 , 具有 较 高 的 观赏 性 .还 强调 艺术 灯 的 景观 与 景区 历史 文化 、 
周围 环境 的 协调 统一 。</dd> 
<dd> 景 观 灯 利 用 不 同 的 造型 、 相 异 的 光 色 与 亮度 来 造 景 。</dd> 
<dd> 景 观 灯 也 有 一 定 的 坏处 ， 例 如 : 不 环保 等 。</dd> 
<d> 
<lbody> 


【说 明 】 本 定义 列表 中 ， 定 义 的 标题 是 “景观 灯 ”， 对 标题 的 描述 有 三 项 内 容 。 
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景观 灯 
景观 灯 是 现代 景观 中 不 可 缺少 的 部 分 ， 具 有 较 高 的 观赏 | 


性 。 还 强调 艺术 灯 的 景观 与 景区 历史 文化 、 周 国 环 境 
的 协调 统一 。 

景观 灯 利 用 不 同 的 造型 、 相 异 的 光 色 与 亮度 来 造 景 。 
景观 灯 也 有 一 定 的 坏处 ， 例 如 : 不 环保 等 。 


图 2-15 定义 列表 


2.4.5 ” 詹 套 列表 


有 序列 表 、 无 序列 表 和 定义 列表 不 仅 可 以 自身 嵌 套 ， 而 且 彼此 可 互相 嵌 套 。 峰 套 列 表 可 以 
把 页 面 分 为 多 个 层次 ， 给 人 以 很 强 的 层次 感 。 

【 例 2-4-4】 媒 套 列表 示例 。 本 例文 件 2-4-4.html 在 浏览 器 中 的 显示 效果 如 图 2-16 所 示 。 页 
面 关键 代码 如 下 。 


<body> 
<d> 
<dP 路 灯 的 分 类 </dt> 
<dd> 
<oP 
<1i> 按 路 灯光 源 分 : 
<uP<l> 钠 灯 路 灯 <Mi> 
<li>LED 路 灯 </i> 
<1> 节 能 路 灯 </i> 
< 上 > 新 型 照明 氯气 路 灯 <i> 
<hl> 
Ali> 
<1i> 按 供电 方式 分 
<u><li> 市 电路 灯 <Ji> 
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<I 记 太阳 能 路 灯 </li> 
< 风光 互补 路 灯 <Hi> 
<P 
<> 
</o> 
</dd> 
</d> 
</body> 
© | © 127.0.0.1.8020/, 
路 灯 的 分 类 
1 按 路 灯光 源 分 ; 
0 钠灯 路 灯 
9 LED 路 灯 
。 节能 路 灯 
?新 型 照明 每 气 路 灯 
2 技 供电 方式 分 
5 市 电路 灯 
”太阳 能 路 灯 
5 风光 互补 路 灯 
图 2-16， 媒 套 列表 
2.4.6 “案例 制作 
【案例 : 招商 加 盟 -合作 方式 局 部 页 面 】2-4.html 文档 的 代码 如 下 。 
<body> 
<h3> 招 商 加 盟 合作 方式 <h3> 
<hr> 
<oP> 
<1i> 资 本 层面 合作 
<ul type="disc'> 


<> 投 资 合作 双方 共同 出 资 ， 共 担 风 险 ， 共 享 利益 。</li> 
<I 访 合资 :双方 出 资 建立 有 限 责任 公司 。</li> 
<1i> 甲 方 收购 乙方 在 某 企业 的 股份 。<Ai> 
< 
<> 
<I 记 交易 合作 
<ul type="square"> 
<1i> 甲 方 销售 乙方 产品 <1i> 
<1i> 甲 方 代理 乙方 产品 <1i> 
< 
<I> 
<1 记 合作 开发 :双方 出 资 研发 ， 将 成 果 转 卖 给 生产 企业 </li> 
</oP> 
<hr width="98%" align="left"> 
<d> 
<dP 加 盟 热线 :<d> 
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<dd>400-180-6788 ” 张 先生 </dd> 
<dd>400-180-6789” 李 先生 </dd> 
<d> 
<body> 


浏览 页 面 ， 可 以 看 到 效果 如 图 2-12 所 示 。 


表格 


表格 是 网 页 中 的 一 个 重要 容器 元 素 ， 可 包含 文字 和 图 像 。 表 格 使 网 页 结构 紧凑 整齐 、 网 页 
内 容 的 显示 一 目 了 然 。 表 格 除了 用 来 显示 数据 外 ， 还 用 于 措 建 网 页 的 结构 ， 几 乎 所 有 HTML 页 
面 都 或 多 或 少 采用 了 表格 。 精 通 网 页 制作 ， 熟 练 掌握 表格 的 各 种 属性 是 很 有 必要 的 。 


2.5.1 案例 分 析 


【案例 展示 】LED 射 灯 介 绍 局 部 页 面 。 
使 用 表格 技术 , 制作 LED 射 灯 介 绍 局 部 页 面 。 本 例文 件 2-5html 在 浏览 器 中 的 显示 效果 如 
图 2-17 所 示 。 


© | © 127.0.0.1:8020/Aladl ed/chapter02/2-5.html?_hbt=1552744502164 


LED 精 品 射 灯 介绍 


名 称 介绍 


功率 : 3W ; 输入 电压 : 220V ; 外 径 尺寸 : 49mm ; 
LED 针 灯 灯 杯 外 元 材质 : 铝 压 铸 ; 灯头 规格 : E27 ; LED 灯 珠 颗 数 : 

] 晒 ;色温 : 3200-6500K ;可否 调 光 : 不 可 以 ; 灯光 
磊 色 : 暖 日 、 日 色 ; 发 光 角度 : 60 度 。 


电 深 要求 : DC1000mA ; 灯具 功率 : 12W ; LED 光 
LED 旋 转 射 灯 效 : 100Im-110Im/W ; 寿命 : 3000H ; 色温 : 3050- 


4000k ; 产品 尺寸 : @105mm*H115mm ; 旋转 度 
数 : 355 度 ; 灯具 颜色 : 白 、 殷 、 人 金 。 


辣 定 功率 : 6W ; 芯片 数量 : 128PCS ; LED 光 效 : 
92Im/W ; 产品 尺寸 : 9110mm"*H63mm ; 工作 电 
压 : AC180-240V/50-60Hz ; 外 壳 材 质 : 铝 材 ; 灯光 
版 色 : 正 白 。 


型 号 ; CL-GA003127GAAK ; 额定 功率 : 3W ; 输入 四 
| 压 : 100-240V ; 角度 : 300s/as/6o/0r120; 光 
通 量 : 210-270 ; AS ee 7000K ; 开 孔 尺寸 
975mm ; 使 用 专 命 : 


年 产量 合计 


2-17 LED 射 灯 介 绍 局 部 页 面 


2.5.2 ”表格 的 结构 
表格 是 由 行 和 列 组 成 的 二 维 表 ， 而 每 行 又 由 一 个 或 多 个 单元 格 组 成 ， 用 于 放置 数据 或 其 他 
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内 容 。 单 元 格 的 内 容 是 数据 ， 可 以 包含 文本 、 图 片 、 列 表 、 段 落 、 表 单 、 水 平 线 或 表格 等 元 素 。 
表格 由 <table> 和 </table> 标 签 定义 。 每 个 表格 均 有 若干 行 (由 <tr> 标签 定义 )， 每 行 被 分 隔 
为 若干 单元 格 (由 <td> 标 签 定义 )。 表 格 的 基本 结构 如 图 2-18 所 示 。 


<table> 表 格 
《caption> 表 格 标题 </caption> 

《tr>| “th> 表 头 1/thy》 | 《th> 表 头 2C/th> Se 《th 和 表 头 n/th》 |</tr> 

《tr>|Ktd》 单 元 格 2-1</td> | <td》 单 元 格 2-2</td>| 。 … <td) 单 元 格 2-n</td>|</tr> 

<tr> |<td? 单 元 格 3-1C/td> <td》 单元 格 3-2</td> .… |<td》 单 元 格 3-n</td>|</tr> 


<tr> 


《tr> 
《<tr>|<td> 单 元 格 m-1</td> 《td> 单 元 格 m-2</td> … 《td)》 单 元 格 m-n</td>|</tr> 


/table> 


2-18 表格 的 基本 结构 


2.5.3 ”表格 的 基本 语法 


在 HIML 语法 中 ， 用 <table> 标签 定义 表格 ， 用 <tr> 标 签 定义 表格 行 ， 用 <th> 标 签 定义 表 
头 ， 用 <td> 标 签 定义 单元 格 。 表 格 的 语法 格式 为 
<table border= "n" width= "xpa" height= "ylo6" cellspacing= "i" cellpadding= "j> 
<caption> 表 格 标题 </caption> 
<t><th> 表 头 1</th><th> 表 头 2</ 耻 >.…<th> 表 头 n</th></tr> 
<t><td> 表 头 2-1</td><td> 表 头 2-2</td>...<td> 表 头 2-n</td></tr> 


<tP<td> 表 头 m-1</td><td> 表 头 m-2</td>.…<td> 表 头 m-n<ftd></tr> 

</table> 

在 上 面 的 语法 中 ， 使 用 <caption> 标 签 为 表格 指定 标题 。 标 题 默认 在 表格 的 上 方 左右 居中 显 
示 ，<caption> 标 签 的 align 属性 可 以 用 来 定义 表格 标题 的 对 齐 方式 。 

表格 是 逐 行 逐 列 建立 的 ， 表 格 的 第 一 行为 表 头 ， 用 <th> 标 签 定义 ， 文 字样 式 为 居中 、 加 粗 
显示 。<td> 标 签 定义 的 单元 格 中 的 文字 按 正 常 字体 显示 。 

表格 的 整体 外 观 由 <table> 标 签 的 属性 决定 ， 各 属性 的 功能 如 下 。 

@ border: 定义 表格 边框 的 宽度 ， 单 位 是 像素 。 默 认 值 为 0， 显示 为 没有 边框 的 表格 。 
width: 定义 表格 的 宽度 ， 单 位 是 像素 或 百分比 。 
height: 定义 表格 的 高 度 ， 单 位 是 像素 或 百分比 。 
cellspacing: 定义 单元 格 之 间 的 空白 ， 单 位 是 像素 ， 默 认为 2px。 

e@ cellpadding: 定义 单元 格 边框 与 内 容 之 间 的 空白 , 单位 是 像素 ， 默 认为 1px。 

【说 明 】 表格 所 使 用 的 边框 粗细 等 样式 一 般 应 放 在 专门 的 CSS 样 式 文件 中 ， 此 处 讲解 这 些 属 
性 仅仅 是 为 了 演示 表格 案例 中 的 页 面 效 果 ， 在 真正 涉及 表格 外 观 时 是 通过 CSS 样 式 完成 的 。 

【 例 2-5-1】 表格 示 例 ， 建 立 按 季度 进行 统计 的 收 支 统 计 表 。 本 例 在 浏览 器 中 的 显示 效果 如 
图 2-19 所 示 。 页 面 文件 2-5-1.html 的 关键 代码 如 下 。 


<body> 
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<table border="1" cellpadding="2" cellspacine="0" width="350"> 
<t><th> 季 度 </ 耻 ><th> 收 入 </th><th> 支 出 < 了 h><th> 合 计 <jth><ft> 
<tr><td>1 季度 </td><td>45000</td><td>40000<ftd><td>5000<ftd></tr> 
<tr><td>2 季度 </td><td>43000</td><td>45000</td><td>-2000</td></tr> 
<tr><td>3 季度 </td><td>45000</td><td>44000</td><td>1000</td></tr> 
<tr><td>4 季度 </td><td>46000</td><td>47000<ftd><td>-1000</td></tr> 


</table> 
<Jbody> 
El 贡 
WD “sitz x 
C | © 127.0.0.1:8020/AladLed/c.， 妆 | : 
收 支 统计 胡 
季度 收入 | 支出 | 合计 
图 2-19 收 支 统计 表 
2.5.4 ”表格 的 修饰 
表格 具有 丰富 的 属性 ， 可 以 通过 属性 的 设置 对 表格 进行 美化 。 
1. 表格 的 大 小 


可 以 通过 width 属性 和 height 属性 指定 表格 的 宽度 和 高 度 ， 单 位 可 以 是 精确 的 像素 值 。 另 
外 ， 也 可 以 通过 表格 所 占 浏览 器 窗口 的 百分比 来 设置 表格 的 大 小 。 

width 属性 和 height 属性 不 但 可 以 设置 表格 的 大 小 ， 还 可 以 设置 表格 单元 格 的 大 小 ， 为 表 
格 单元 格 设置 width 属性 或 height 属性 ， 将 影响 整 行 或 整 列 单 元 格 的 大 小 。 

2. 表格 的 背景 


表格 的 背景 默认 为 白色 ， 可 以 根据 网 页 设计 的 要 求 ,用 bgcolor 属性 设 定 表格 的 背景 颜色 。 
可 以 用 background 属性 设 定 表格 的 背景 图 像 ， 表 格 的 背景 图 像 可 以 是 GIF、JPEG 或 PNG 三 种 
图 像 格 式 。 

使 用 bgcolor 属性 和 background 属性 也 可 以 分 别 为 单元 格 添加 背景 颜色 和 背景 图 像 。 

不 过 需要 注意 ， 表 格 和 单元 格 的 背景 颜色 或 背景 图 像 需 要 与 文字 颜色 形成 足够 的 反差 ， 否 
则 ， 将 不 容易 分 辨 表格 中 的 文本 数据 。 

【 例 2-5-2】 修 改 例 2-5-1 中 的 表格 ， 给 第 一 行 ( 表 头 行 ) 添 加 背景 颜色 。 本 例文 件 2-5-2.html 
在 浏览 器 中 的 显示 效果 如 图 2-20 所 示 。 修 改 后 的 代码 如 下 。 


<tr bgcolor="#DDD">< 了 h> 季 度 </ 了 >< 由 > 收入 </ 也 >< 耻 > 支出 </th><th> 合 计 < 了 b></t> 
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le 


G [© 127.0.01:8020/Aladled/c.， 站 | : 


收 支 统计 表 
季度 | 收入 | 支 中 | 合计 
1 二 度 |45000 |40000 ”|5ooo 
?季度 |43000 |45000 |-2000 
3 季度 ”|46000 |44000 |1000 
4 季度 ”|46000 ”|47000 |-1000 


图 2-20 为 收 支 统计 表 表 的 头 加 背景 色 


3. 表格 的 对 齐 方式 


表格 在 网 页 中 的 位 置 有 3 种 : 居 左 、 居 中 和 居 右 。 使 用 align 属性 设置 表格 在 网 页 中 的 对 
齐 方式 ， 格 式 为 : 


<table align="left | center | right'> 


属性 align 的 默认 取 值 为 left， 即 在 默认 情况 下 表格 的 对 齐 方 式 为 左 对 齐 。 
当 表格 设置 了 align 属性 , 位 于 页 面 的 左 侧 或 右 侧 时 ,文本 填充 则 在 男 一 侧 。 当 表格 居中 或 
省 略 align 属性 时 ， 文 本 则 在 表格 的 下 面 。 


4. 表格 中 数据 的 对 齐 方式 


(1) 数据 水 平 对 齐 
使 用 align 属性 可 以 设置 表格 中 数据 在 单元 格 中 的 水 平 对 齐 方 式 。align 属性 的 取 值 可 以 是 
left、center 和 right， 默 认 值 为 left， 即 单元 格 数据 水 平 左 对 齐 。 
如 果 在 <tr> 标 签 中 使 用 align 属性 ， 则 设置 整 行 所 有 单元 格 中 的 数据 水 平 对 齐 。 
如 果 给 某 个 单元 格 的 <td> 标 签 使 用 align 属性 ， 则 设置 该 单元 格 中 的 数据 水 平 对 齐 。 
(2) 数据 垂直 对 齐 
使 用 valign 属性 可 以 设置 表格 中 的 数据 在 单元 格 中 的 垂直 对 齐 方式 。valign 属性 的 取 值 可 
以 是 top、middle、bottom 和 baseline， 默 认 值 为 middle， 即 单元 格 数据 垂直 居中 对 章 。 
【 例 2-5-3】 修 改 例 2-5-2 中 的 表格 ， 使 得 表格 中 的 数据 在 单元 格 中 水 平 居中 显示 。 本 例文 
件 2-5-3.html 在 浏览 器 中 的 显示 效果 如 图 2-21 所 示 ， 修 改 后 的 表格 代码 如 下 。 
<table border="l" cellpadding="2" cellspacing="0" width="350"> 
<caption> 收 支 统计 表 </caption> 
<tr bgcolor="#DDD">< 了 h> 季 度 </ 耻 ><th> 收 入 </ 了 h><th> 支 出 </th><th> 合 计 </th></t> 
<tr align="center"><td>1 季度 </td><td>45000</td><td>40000</td><td>5000</td></t> 
<tr align="center"><td>2 季度 </td><td>43000</td><td>45000</td><td>-2000</td></tr> 
<tr align="center"><td>3 季度 </td><td>45000</td><td>44000</td><td>1000</td></tr> 


<tr align="center"><td>4 季度 </td><td>46000</td><td>47000</td><td>-1000</td></t> 
</table> 


和 38 


第 2 章 网 页 基本 元 素 


1 季度 
2 季度 


E 


2-21 数据 水 平 居 中 显示 


2.5.5 不 规范 表格 
所 谓 不 规范 表格 ， 是 指 单元 格 的 个 数 不 等 于 行 数 乘 以 列 数 的 值 。 在 实际 应 用 中 经 常会 使 用 
不 规范 表格 ， 这 就 需要 把 多 个 单元 格 合并 为 一 个 单元 格 ， 也 就 是 表格 的 跨行 和 跨 列 功能 。 
HTML 中 用 colspan 和 rowspan 属性 来 创建 不 规范 表格 。 
1. 设置 单元 格 跨行 
跨行 是 指 单元 格 在 垂直 方向 上 合并 , 用 单元 格 的 rowspan 属性 可 设置 单元 格 跨行 。 语法 如 下 : 
<td rowspan=" 所 跨 的 行 数 "> 单 元 格 内 容 </td> 
【说 明 】rowspan 属性 指明 该 单元 格 应 有 多 少 行 的 跨度 ， 在 <th> 和 <td> 标 签 中 使 用 。 
2. 设置 单元 格 跨 列 


跨 列 是 指 单元 格 在 水 平方 向 上 合并 ， 用 单元 格 的 colspan 属性 可 设置 单元 格 跨 列 。 语 法 如 下 : 
<td colspan=" 所 跨 的 列 数 "> 单 元 格 内 容 </td> 


【说 明 】colspan 属性 指明 该 单元 格 应 有 多 少 列 的 跨度 ， 在 <th> 和 <td> 标 签 中 使 用 。 
【 例 2-5-4】 修 改 例 2-5-3 中 的 表格 ， 在 最 下 边 增加 一 行 ， 显 示 对 合计 列 进行 总 计 的 数值 。 
本 例文 件 2-5-4.html 在 浏览 器 中 的 显示 效果 如 图 2-22 所 示 。 修 改 后 的 代码 如 下 。 


<tr align="center"><td colspan="3"> 总 计 </td><td>3000</td></tr> 
LalsIs 3 


WD west x* 民 


Eh 


C | © 127.0.0.1:8020/AladLed/c... 立 | : 


收 支 统计 去 
季度 收入 支出 合计 
1 季度 | 45000 | 40000 | 5000 
2 季度 | 43000 | 45000 | -2000 
3 季度 | 45000 | 44000 | 1000 
4 季度 | 46000 | 47000 | -1000 
总 计 | 3000 


2-22 不 规范 表格 
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【说 明 ] 为 表格 设置 跨行 跨 列 以 后 , 并 不 会 改变 表格 的 特点 。 表 格 中 同行 的 内 容 总 高 度 一 致 ， 
同 列 的 内 容 总 宽度 一 致 ， 各 单元 格 的 宽度 或 高 度 互相 影响 ， 结 构 相 对 稳定 ， 不 足 之 处 是 不 能 灵 
活 地 进行 布局 控制 。 


2.5.6 ”案例 制作 


【案例 : LED 射 灯 介 绍 局 部 页 面 】 在 HBuilder 中 创建 该 页 面 的 步骤 如 下 。 
(1) 把 需要 的 图 片 资料 复制 到 项 目的 img 文件 夹 中 。 
(2) 在 项 目 中 创建 2-5.html 文件 ， 页 面 文件 的 关键 代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title>LED 射 灯 介绍 </tile> 
</head> 
<body> 
<table border="1" cellpadding="2" cellspacing="0" width="780"> 
<caption><h4>LED 精品 射 灯 介 绍 </h4></caption> 
<tr> <th width="160" height="30'"> 图 片 </th> 
<th width="120'> 名 称 </th> 
<th width="400'> 介 绍 </th> 
<th width="100"> 年 产量 </th> 
</a> 
<tr> <td><img sre="img/led sd3jpg" width="150"></td> 
<td>LED 射 灯 灯 杯 </td> 
<td> 功 率 : 3W; 输入 电压 : 220V; 外 径 尺 寸 : D49mm; 外 壳 材 质 : 铝 压 铸 ; 灯头 规格 : E27; LED 
灯 珠 颗 数 : !1 颗 ， 色温: 3200-6500K， 可 否 调 光 : 不 可 以 ; 灯光 颜色 : 暖 白 、 白 色 ， 发光 角 度 : 60 度 。</td> 
<td align="center">35000</td> 
</t> 
<tr> <td><img src="imghled sd4jpg" width="150"></td> 
<td>LED 旋转 射 灯 </td> 
<td> 电 源 要 求 : DC1000mA; 灯具 功率 : 12W; LED 光 效 : 100lm-110lm/W; 寿命 ，3000H; 
色温 : 3050-4000k; 产品 尺寸 : D105mm*H115mm; 旋转 度数 : 355 度 ; 灯具 颜色 : 白 、 银 、 金 。</td> 
<td align="center">43000</td> 
<> 
<tr> <td><img ste="img/led_sd5 .jpe" width="150"> </td> 
<td>LED 射 灯 </td> 
<td> 额定 功率 6W; 芯片 数量 :128PCS; LED 光 效 : 92lm/W;， 产品 尺寸 : B110mm*H63mm; 
工作 电压 : AC180-240V/50-60Hz; 外 壳 材 质 : 铝 材 ; 灯光 颜色 : 正 白 。</td> 
<td align="center">40000</td> 
</t> 
<tr> <td><img ste="img/led sd6 jpe" width="150"></td> 
<td>LED 天 花 射 灯 </td> 
<td> 型 号 : CL-GA003127GAAK ; 额定 功率 : 3 W; 输入 电压 : 100-240V; 角度 : 30(15/45/60/90/120) 
度 ; 光 通 量 : 210-270; 色温 : 2600-7000K; 开 孔 尺寸 ，D75mm; 使 用 寿命 : 35000H。</td> 
<td align="center">52000</td> 
</r> 
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<tr> <td colspan="3" align"right"> 年 产量 合计 <jtd> 
<td align="center">170000 </td> 
<> 

</table> 


</body> 
(3) 在 浏览 器 中 浏览 2-5.html 文件 ， 可 以 看 到 显示 效果 如 图 2-17 所 示 。 


页 面 交 互 标签 


HTMLS5 中 新 增 了 一 些 页 面 交互 元 素 ， 以 增强 页 面 的 交互 体验 ， 本 节 将 详细 介绍 这 些 元 素 。 


2.6.1 details 和 summary 元 素 


details 元 素 用 于 显示 或 隐藏 文档 的 细节 信息 。details 元 素 往往 与 summary 元 素 配合 使 用 ， 
由 summary 为 details 定义 标题 。 默 认 情况 下 ， 不 显示 details 中 的 内 容 ， 当 用 户 单 击 标题 时 ， 
会 显示 出 details 中 的 内 容 。 
用 details 和 summary 实现 信息 显示 /隐藏 功能 的 代码 格式 如 下 。 
<details open="open"> 
<summary> 标 题 </summary> 
文档 详细 信息 

</details> 

属性 open: 取 值 为 open， 定 义 details 是 否 显示 。 默 认 不 显示 。 

【 例 2-6-1)】 信息 显示 /隐藏 案例 设计 。 本 例 在 浏览 器 中 的 显示 效果 如 图 2-23 所 示 ， 当 单 击 
标题 “HTMLS 简介 ”时 ， 隐 藏 的 信息 便 会 显示 出 来 ， 如 图 2-24 所 示 。 页 面 文 件 2-6-1.html 的 
关键 代码 如 下 。 

<body> 

<details> 
<summary>HTMLS 简介 </summary> 
HTML5 将 成 为 HTML、XHTML 以 及 HTML DOM 的 新 标准 。<br> 
HIML5 是 W3C 与 WHATWG 合作 的 结果 。 


</details> 
</body> 
LaJlsI® 3 [LalsI® 3 
/ YY detailsipsummary LA 了 D detailsi0summary x 
GC | © 127.0.0.1:8020/AladLed/chapter0 | GC | © 127.0.0.1:8020/AladLed/chapter02/2... 食 | 了 
> HTML5 简 介 YY HTML5 简 介 
HTMLS 将 成 为 HTML、XHTML 以 及 HTMLDOM 的 新 标准 。 
HTML5 是 W3C 与 WHATWG 合 作 的 结果 。 


图 2-23 信息 隐藏 图 2-24 信息 显示 
再 次 单 击 “HTML5 简介 ”标题 时 ， 又 重新 回 到 图 2-23 所 示 的 效果 。 
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2.6.2 ”progress 元 素 


progress 元 素 用 于 显示 某 个 特定 任务 的 时 间 进 度 ， 如 播放 一 段 音 乐 的 完成 情况 ， 上 传 或 下 
载 一 个 文件 的 时 间 进 度 。 进 度 可 以 是 不 确定 的 ， 只 是 表示 进度 正在 进行 ， 但 是 不 清楚 还 有 多 少 
工作 量 没有 完成 .也 可 以 用 0 到 某 个 最 大 数字 (如 100) 之 间 的 数字 来 表示 准确 的 进度 完成 情况 (如 
进度 百分比 )。 用 progress 元 素 定 义 进度 条 的 格式 如 下 : 

<progress value= "valuel" max="value2"></progress> 

属性 介绍 如 下 。 

e value: 定义 当前 已 完成 的 工作 量 数值 。 属 性 值 valuel 的 取 值 范围 是 0.0~1.0 或 者 在 max 

值 以 下 。 

e max: 定义 全 部 的 工作 量 数值 。 属 性 值 value2 的 默认 取 值 范围 是 0.0~1.0, 默认 值 是 1.0。 

需要 注意 的 是 ，value 和 max 属性 的 值 必须 大 于 0， 且 value 的 值 要 小 于 或 等 于 max 属性 
的 值 。 

【 例 2-6-2】 用 progress 显示 文件 的 下 载 进度 。 本 例 在 浏览 器 中 的 显示 效果 如 图 2-25 所 示 ， 
页 面 文件 2-6-2.html 的 关键 代码 如 下 。 


文件 1 下 载 进度 : 
<progress value="30" max="100"></progress> <br/><br/> 
文件 2 下载 进度 : 
<progress value="0.5" max="1"></progress> 
</body> 


[SIIEIESTRT 
了 口 progress 元 素 x 


GC |©127.0.0.18020/AladL.. 女 | : 
文件 1 下 载 进度 : 唱 
文件 2 下 载 进度 :到 到 到 | 


图 2-25 ”progress 示例 


2.6.3 ”meter 元 素 


meter 元 素 用 于 表示 指定 范围 内 的 数值 。 例 如 ， 若 要 显示 硬盘 容量 或 某 个 候选 人 的 投票 人 
数 占 投票 总 人 数 的 比例 等 ， 都 可 以 使 用 meter 元 素 。 

用 meter 元 素 显示 数值 度量 情况 的 格式 如 下 : 

<meter value="Valuel" optimum="value2" low="value3" high="value4" min="Value5" max="value6" ></meter> 

属性 介绍 如 下 。 

e value: 定义 度量 的 当前 值 。 该 属性 是 一 个 必要 属性 。 

e optimum: 定义 度量 的 优化 值 ， 即 什么 样 的 度量 值 是 最 佳 值 。 如果 该 值 大 于 high 属性 的 

值 ， 则 意味 着 值 越 大 越 好 。 如 果 该 值 小 于 low 属性 的 值 ， 则 意味 着 值 越 小 越 好 。 
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low: 定义 度量 的 值 位 于 哪个 点 被 界定 为 低 值 的 范围 。 
high: 定义 度量 的 值 位 于 哪个 点 被 界定 为 高 值 的 范围 。 
min: 定义 范围 的 最 小 值 ， 默 认 值 是 0。 
max: 定义 范围 的 最 大 值 ， 默 认 值 是 1。 
【 例 2-6-3】 用 meter 显示 期 末 测 试 各 班 的 及 格 率 统计 结果 。 本 例 在 浏览 器 中 的 显示 效果 如 
图 2-26 所 示 ， 页 面 文件 2-6-3.html 的 关键 代码 如 下 。 


<body> 
<p> 期 末 测试 各 班 及 格 率 如 下 : </p> 
<p> 一 班 : 
<meter value="0.4" optimum="1" high="0.85" low="0.5" max= "1" min="0">30%</meter> 
<span>40%</span> 
<p> 
<p> 二 班 : 
<meter value="70" optimum="100" high="85" low="50" max="100" min="0"></meter> 
<span>70%</span> 
<p> 
<p> 三 班 : 
<meter value="91" optimum="100" high="85" low="50" max="100" min="0"></meter> 
<span>91%</span> 
<p> 
<body> 


ELIETIEIEES 


】 口 meter 元 素 x 忆 
| C | © 127.00.1 8020/Alad | 
期 未 测试 各 班 及 格 率 如 下 
班 : 画面 40% 
二 班 i 70% 
三 班 : 站) 91% 


图 2-26 meter 示例 


【说 明 】 本 例 中 ，low 属性 的 值 为 0.5(50%)，high 属性 的 值 为 0.85(85%)， 并 且 optimum 属 
性 的 值 为 1( 大 于 high 属性 的 值 )。value>=0.85 时 为 优 ， 显 示 绿色 ; 0.5=<value<0.85 时 为 良好 ， 
显示 黄色 ; value<0.5 时 为 差 ， 显 示 红色 。 


实 训 


【 实 训 任务 】 设 计 新 闻 动态 -产品 资讯 局 部 页 面 。 本 例文 件 2-7html 在 浏览 器 中 的 显示 效果 
如 图 2-27 所 示 。 


【知识 要 点 】 文 本 控制 标签 、 图 像 标签 及 图 文 混 排 、 列 表 、 超 链接 。 
【 实 训 目 标 】 掌 握 用 文本 标签 、 图 像 标签 、 列 表 、 超 链接 等 设计 页 面 的 技术 。 
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C | © 127.0.0.1:8020/AladLed/chapter02/2-7.html?_hbt=1552750338902 


新 闻 动 态 -产品 资讯 


科学 家 们 基于 水 栽培 法 ， 使 用 可 重复 使 用 的 水 循环 与 营养 系统 ， 同 时 ， 以 LED 照 明 
代替 日 光 ， 并 仔细 监控 室内 的 二 氧化 碳 。 


德国 位 于 南极 的 诺 伊 迈 尔 三 号 站 (Neumayer Station IJ) 的 科学 家 ， 于 室外 温度 低 
于 -20*C 的 条 件 下 ， 在 高 科技 温室 (EDEN-ISS) 成 功 种 出 了 无 需 泥土 、 日 光 及 农药 的 蔬 
菜 ,包括 3.6 千 克 色 拉 生 菜 、18 条 黄瓜 和 70 颗 小 萝卜 。 


随 着 中 国 经 济 发 展 进 入 新 常态 ， 经 济 发 展 动力 越 来 越 依赖 创新 驱动 ， 知 识 产权 保护 
和 创新 驱动 在 经 济 发 展 中 ， 其 重要 性 正 被 逐渐 凸显 出 来 。 


为 规范 谤 内 LED 光 信息 传输 系统 的 技术 要 求 ， 深 圳 市 市 场 监督 管理 局 公开 发 布 了 深 
芭 | 市 标准 化 指导 性 技术 文件 《室内 LED 光 信息 传输 系统 通用 技术 要 求 》。 


2018 年 4 月 4 日 ， 为 规范 室内 LED 光 信息 传输 系统 的 技术 要 求 ， 深 圳 [市场 监督 管理 局 
公开 发 布 了 深圳 市 标准 化 指导 性 技术 文件 《室内 LED 光 信息 传输 系统 通用 技术 要 求 》。 


图 2-27 新 闻 动态 -产品 资讯 局 部 页 面 


2.7.1 任务 分 析 
分 析 图 2-27 所 示 的 页 面 ， 该 页 面 由 h3 标题 、 水 平 线 和 无 序列 表 构成 ， 而 无 序列 表 的 列表 
项 又 由 h4 标题 、 图 片 和 文字 构成 ， 并 且 采 用 图 片 靠 左 的 图 文 混 排 布局 。 单 击 列表 项 的 标题 能 打 
开 对 应 的 资讯 详情 页 。 
2.7.2 ”任务 实现 
根据 上 面 的 分 析 ， 准 备 素材 ， 创 建 网 页 文件 ， 完 成 新 闻 动 态 -产品 资讯 局 部 页 面 的 设计 。 
1. 创建 页 面 文件 


(1) 启动 HBuilder， 把 需要 的 图 片 素材 复制 到 当前 项 目的 img 文件 夹 中 。 
(2) 在 当前 项 目 中 新 建 一 个 HIMLS 文档 ， 文 件 名 为 2-7html。 
(3) 在 HBuilder 编辑 区 编辑 该 文件 ， 页 面 文件 结构 的 代码 如 下 。 


和 4 


第 2 章 网 页 基本 元 素 


<body> 
<h3> 新 闻 动 态 -产品 资讯 <h3> 
<h> 


<I> 
<h4><a hre 人 "2-2.html"> 以 LED 照明 代 蔡 日 光 ， 科 学 家 在 南极 成 功 种 植 蔬菜 </a></h4> 
<img ste="img/pro_info 1jpg” width="150" height="130" align="left" hspace="10"/> 
<p>&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp: 科 学 家 们 基于 水 栽培 法 ， 使 用 可 重复 使 用 的 水 循环 与 营 
养 系 统 ， 同 时 ， 以 LED 照明 代 蔡 日 光 ， 并 仔细 监控 室内 的 二 氧化 碳 。</p> 
<p>&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp: 德 国 位 于 南极 的 诺 伊 迈 尔 三 号 站 (Neumayer Station ID 的 
科学 家 ， 于 室外 温度 低 于 -20°C 的 条 件 下 ， 在 高 科技 温室 (EDEN-ISS) 成 功 种 出 了 无 需 泥土 、 日 光 
及 农药 的 蔬菜 ， 包 括 3.6 千克 色拉 生菜 、18 条 黄瓜 和 70 颗 小 萝卜 。</p> 
< 人 > 
<I> 
<h4><a href="#> 告 别 价格 战 ! 专利 成 为 LED 企业 竞争 “核武 器 "</a></h4> 
<img src="img/pro info 2jpg" width="150" height="130" align="left" hspace="10"/> 
<p>&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp: 随 着 中 国 经 济 发 展 进 入 新 常态 ， 经 济 发 展 动力 越 来 越 依 
赖 创 新 驱动 ， 知 识 产权 保护 和 创新 驱动 在 经 济 发 展 中 ， 其 重要 性 正 被 逐渐 凸显 出 来 。</p> 
<br> <br> <br/> 
<> 
<li> 
<h4><a href="#> 首 个 室内 LED 光 信息 传输 系统 地 方 标准 出 台 </a></h4> 
<img sre="img/pro_info 3.png" width="150" height="130" align="left" hspace="10"/> 
<p>&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp: 为 规范 室内 LED 光 信 息 传输 系统 的 技术 要 求 ， 深 圳 市 市 
场 监督 管理 局 公开 发 布 了 深圳 市 标准 化 指导 性 技术 文件 《室内 LED 光 信 息 传输 系统 通用 技术 要 求 》。<p> 
<p>&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:2018 年 4 月 4 日 , 为 规范 室内 LED 光 信息 传输 系统 的 技 
术 要 求 ， 深 圳 市 场 监督 管理 局 公开 发 布 了 深圳 市 标准 化 指导 性 技术 文件 《室内 LED 光 信息 传输 系统 
通用 技术 要 求 》。</p> 
i> 
<h> 


</body> 

(4) 在 Chrome 浏览 器 中 浏览 网 页 ， 效 果 如 图 2-27 所 示 。 

【 实 训 说 明 】 在 第 二 条 资讯 的 内 容 后 边 ， 添 加 了 多 个 换行 符 <br>， 这 是 为 了 增加 行 数 使 布 
局 整齐 ， 因 为 第 二 条 资讯 的 内 容 较 少 。 

图 文 混 排 最 好 用 CSS 样式 实现 ， 对 图 片 设置 靠 左 浮动 ， 并 对 下 一 条 资讯 设置 清除 浮动 。 实 
现 方法 请 参考 配套 网 站 的 源码 。 


本 章 小 结 


本 章 首先 介绍 了 文本 控制 标签 的 功能 及 用 法 ， 然 后 介绍 了 图 像 标 签 、 文 件 的 路 径 知识 和 图 
文 混 排 技术 ， 以 及 超 链接 技术 、 列 表 和 表格 的 设计 技术 、 页 面 交互 元 素 的 功能 ， 最 后 通过 实例 
讲解 了 文本 控制 标签 、 图 像 标 签 、 列 表 标签 和 超 链接 在 页 面 设计 中 的 实际 应 用 技术 。 

通过 本 章 的 学 习 ， 读 者 应 能 掌握 应 用 页 面 元 素 设计 简单 网 页 的 技术 。 
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练习 题 


1. 应 用 文本 控制 标签 设计 如 图 2-28 所 示 的 页 面 。 
2. 利用 图 文 混 排 技术 和 文本 控制 标签 设计 如 图 2-29 所 示 的 页 面 。 
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待 到 重阳 日 


图 2-28 练习 题 1 效果 图 


3. 设计 如 图 2-30 所 示 的 导航 。 
4. 设计 如 图 2-31 所 示 的 嵌 套 列表 。 
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1 绿茶 : 绿茶 是 不 经 过 发 醇 的 茶 。 


° 祁 红 
5。 酒 红 
9 英 红 
3. 乌龙茶 : 是 一 类 介 于 红 绿 茶 之 间 的 半 发 酵 某 。 
。 武夷 岩 茶 
。 铁 观音 
。 凤凰 单 从 
。 台湾 乌龙茶 


4 白茶 : 白茶 则 基本 上 就 是 靠 日 晒 制 成 的 。 
9 日 京 银 针 茶 
9 白 牲 丹 茶 


图 2-30 练习 题 3 效果 图 图 2-31 练习 题 4 效果 图 
5. 设计 如 图 2-32 所 示 的 课程 表 。 


星期 一 | 时 期 二 
| 语文 
历史 地理 
| 语文 | 数学 


图 2-32 练习 题 5 效果 图 


第 3 章 


CSS 是 Web 设计 领域 中 的 一 次 突破 ， 它 为 HTML 标记 语言 提供 了 一 种 样式 描述 ， 定 义 了 
其 中 元 素 的 显示 方式 , 包括 版 式 、 颜色 和 大 小 等 。 CSS 样式 表 可 以 将 所 有 的 样式 声明 统一 存放 ， 
进行 统一 管理 ， 也 就 是 说 ， 页 面 中 显示 的 内 容 放 在 结构 里 ， 而 修饰 、 美 化 放 在 样式 里 ， 实 现 结 
构 ( 内 容 ) 与 样式 的 分 离 。 这 样 ， 当 页 面 使 用 不 同 的 样式 时 ， 呈 现 出 的 效果 是 不 一 样 的 。W3C( 万 
维 网 联盟 ) 推 荐 使 用 CSS 来 实现 页 面 元 素 的 显示 。 


本 章 的 学 习 目 标 : 

e 掌握 CSS 的 定义 与 使 用 方法 。 

e 掌握 CSS 样式 规则 。 

e 掌握 CSS 基础 选择 器 ， 能 够 运用 CSS 选择 器 选择 页 面 元 素 。 
e@ 掌握 CSS 长 度 单位 、 百 分 比 单位 和 色彩 单位 的 使 用 。 

e 掌握 CSS 的 层 芝 性 和 继承 性 。 

e@ 理解 CSS 的 优先 级 ， 能 够 区 分 复合 选择 器 权重 的 大 小 。 


CSS 的 定义 与 使 用 


CSS 提供 了 丰富 的 文档 样式 外 观 ， 以 及 设置 文本 和 背景 属性 的 能 力 ; 可 以 为 任何 元 素 创 建 
边框 ， 设 置 元 素 边框 与 其 他 元 素 间 的 距离 ， 以 及 元 素 边框 与 元 素 内 容 间 的 距离 ， 人 允许 随意 改变 
文本 的 大 小 写 方式 、 修饰 方式 以 及 其 他 页 面 效 果 。 现在 所 有 漂亮 的 网 页 几乎 都 使 用 了 CSS，CSS 
已 经 成 为 网 页 设计 必 不 可 少 的 工具 之 一 。 


3.1.1 CSS 概述 


使 用 HIML 标签 属性 对 网 页 进行 修饰 的 方式 存在 很 大 的 局 限 性 与 不 足 ， 如 网 站 维护 困难 、 
不 利于 代码 阅读 等 。 如 果 和 希望 网 页 美观 、 大 方 ， 并 且 升 级 轻松 、 维 护 方便 ， 就 需要 使 用 CSS 实 
现 结构 与 样式 的 分 离 。 

CSS 以 HIML 为 基础 ， 提 供 了 丰富 的 功能 ， 如 字体 、 颜 色 、 背 景 的 控制 及 整体 排版 等 ， 而 
且 还 可 以 针对 不 同 的 浏览 器 设置 不 同 的 样式 。 
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同时 CSS 非常 灵活 ， 既 可 以 嵌入 到 HTML 文档 中 ， 也 可 以 是 一 个 单独 的 外 部 文件 。 如 果 
是 独立 的 文件 ， 则 必须 以 .css 为 扩展 名 。 

如 今 大 多 数 网 页 都 是 遵循 Web 标准 开发 的 ， 即 使 用 HTML 编写 网 页 结构 和 内 容 ， 而 相关 
的 版 面 布 局 、 文 本 或 图 片 的 显示 样式 都 使 用 CSS 控制 。 通 过 更 改 CSS 样式 ， 就 可 以 轻松 控制 
网 页 的 表现 样式 。 


3.1.2 CSS 的 定义 和 引用 


1. 内 联 样式 


内 联 样 式 就 是 在 元 素 标签 内 使 用 style 属性 ，style 属性 的 值 可 以 包含 任何 CSS 样式 声明 。 
用 这 种 方法 ， 可 以 很 简单 地 对 某 个 标签 单独 地 定义 样式 表 。 这 种 样式 表 只 对 所 定义 的 标签 起 作 
用 ， 并 不 对 整个 页 面 起 作用 。 内 联 样 式 的 格式 为 : 
< 标签 syle= "属性 :属性 值 : 属性 :属性 值 …"> 
说 明 : 内 联 样式 由 于 将 表现 和 内 容 混 在 一 起 ,不 符合 Web 标准 ， 因 此 要 慎 用 这 种 方法 。 当 
样式 仅 需 要 在 一 个 元 素 上 应 用 一 次 时 可 以 使 用 内 联 样 式 。 
【 例 3-1-1】 使 用 内 联 样式 将 样式 表 的 功能 加 入 到 网 页 中 ， 本 例 在 浏览 器 中 的 显示 效果 如 图 
3-1 所 示 。 页 面 文件 3-1-1.html 的 关键 代码 如 下 。 
<head> 
<meta charset="utf-8" /> 
<title>CSS 样式 </title> 
</head> 
<body> 
<p style="font-size:18px; colorred"> 此 行文 字 被 定义 为 红色 显示 </p> 
<p> 此 行文 字 没 有 定义 显示 样式 </p> 
<lbody> 
【说 明 】 代 码 中 的 第 1 个 段落 标签 被 直接 定义 了 style 属性 ， 此 行文 字 将 显示 18px 大 小 的 红 
色 文字 ; 而 第 2 个 段落 标签 没有 被 定义 ， 将 按照 默认 的 设置 显示 文字 样式 。 


CQ@ 127.0.01:8020/Ala.- 


此 行文 字 被 定义 为 红色 显示 


此 行文 字 没 有 定义 显示 样式 


3-1 CSS 样式 的 应 用 


2. 内 部 样式 表 


内 部 样式 表 写 在 HTML 的 <head>…</head> 标 签 对 内 ， 只 对 所 在 的 网 页 有 效 。 内 部 样式 表 
所 在 的 HTML 文件 可 以 直接 使 用 该 样式 的 标签 。 单 个 页 面 需 要 应 用 样式 时 ， 最 好 使 用 内 部 样 
式 表 。 
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(GD 内 部 样式 表 的 格式 为 : 

<style type="text/css"> 

选择 器 1{ 属 性 : 属性 值 ， 属 性 : 属性 值 …} 。 注释 内 容 六 
选择 器 2{ 属 性 : 属性 值 ， 属 性 : 属性 值 …} 


选择 器 n{ 属 性 : 属性 值 ， 属 性 : 属性 值 …} 
</style> 
<style>…</style> 标 签 对 用 于 说 明 所 要 定义 的 样式 。type 属性 指定 style 使 用 CSS 的 语法 来 
定义 。/#*…#/ 为 CSS 的 注释 符号 ， 用 于 注释 CSS 的 设置 值 。 
选择 器 可 以 使 用 HIML 标签 的 名 称 ， 所 有 HTML 标签 都 可 以 作为 CSS 选择 器 使 用 。 
(2) 组 合 选择 器 的 格式 
除了 在 <style>…</style> 内 分 别 定义 各 种 选择 器 的 样式 外 ， 如 果 多 个 选择 器 具有 相同 的 样 
式 ， 还 可 以 采用 组 合 选择 器 ， 以 减少 重复 定义 的 麻烦 ， 格 式 为 : 
<style type="text/css"> 
选择 器 1， 选 择 器 2，…， 选 择 器 n{ 属 性 : 属性 值 ， 属 性 : 属性 值 …} 
</style> 
【 例 3-1-2】 使 用 内 部 样式 表 将 样式 表 的 功能 加 入 到 网 页 中 ， 本 例 在 浏览 器 中 的 显示 效果 如 
图 3-1 所 示 , 页 面 文件 3-1-2.html 的 关键 代码 如 下 。 
<head> 
<meta charset="utf-8" /> 
<title>CSS 样式 </title> 
<style text="text/css"> 
‘text] {font-size:18px: color:red:} 
</style> 
</head> 
<body> 
<p class="text1"> 此 行文 字 被 定义 为 红色 显示 </p> 
<p> 此 行文 字 没 有 定义 显示 样式 </p> 
</body> 
【说 明 】 代 码 中 的 第 1 个 段落 标签 使 用 内 部 样式 表 中 定义 的 .textl 类 样式 ， 此 行文 字 将 显示 
18px 大 小 的 红色 文字 ; 而 第 2 个 段落 标签 没有 被 定义 ， 将 按照 默认 的 设置 显示 文字 样式 。 


3. 外 部 样式 表 


多 个 页 面 需要 应 用 相同 样式 时 , 应 该 使 用 外 部 样式 表 。 外 部 样式 表 管理 整个 Web 页 面 的 外 
观 。 进 行 Web 开发 时 ， 首 先 应 对 整个 外 观 定义 一 个 CSS 文 件 (扩展 名 为 -css)， 当 页 面 需 要 使 用 样 
式 时 ， 通 过 <link> 标 签 来 链接 外 部 样式 表 文 件 。 使 用 外 部 样式 表 可 以 实现 改变 一 个 文件 就 能 改 
变 整个 站 点 外 观 的 目的 。 

(1) 用 <link> 标 签 链接 样式 表 文件 

<link> 标 签 必须 放 到 页 面 的 <head>…</head> 标 签 对 内 ， 其 格式 为 : 

<head> 
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<link rel= "stylesheet” hre 人 "外 部 样式 表 文 件 名 .css ” type="textlcss" > 


<head> 

其 中 ，<link> 标 签 表示 浏览 器 从 “外 部 样式 表 文 件 名 .css” 文 件 中 以 文档 格式 读 出 定义 的 样 
式 表 。rel="stylesheet" 属 性 定义 在 网 页 中 使 用 外 部 样式 表 , type="text/css" 属 性 定义 文件 的 类 型 为 
样式 表 文件 ，href 属性 用 于 定义 .css 文件 的 URL。 

(2) 样式 表 文 件 的 格式 

样式 表 文件 可 以 用 任何 文本 编辑 器 (如 记事 本 ) 打 开 并 编辑 ， 样 式 表 文件 的 扩展 名 为 .css， 其 
内 容 是 定义 的 样式 表 ， 不 包含 HTML 标签 。 样 式 表 文件 的 格式 为 : 

选择 器 1{ 属 性 : 属性 值 ， 属 性 : 属性 值 …} 人 * 注 释 内 容 */ 

选择 器 2{ 属 性 : 属性 值 ， 属 性 : 属性 值 …} 


选择 器 n{ 属 性 : 属性 值 ， 属 性 : 属性 值 …} 


一 个 外 部 样式 表 文 件 可 以 应 用 于 多 个 页 面 。 在 修改 外 部 样式 表 时 ， 引 用 它 的 所 有 外 部 页 面 
也 会 自动 更 新 。 设 计 者 在 制作 有 大 量 相同 样式 页 面 的 网 站 时 ， 这 一 功能 非常 有 用 ， 不 仅 能 减少 
重复 的 工作 量 , 而 且 有 利于 以 后 修改 。 浏 览 时 也 能 减少 重复 下 载 的 代码 量 , 加 快 网 页 的 显示 速度 。 
【 例 3-1-3】 使 用 外 部 样式 表 定 义 网 页 元 素 的 样式 , 本 例 在 浏览 器 中 的 显示 效果 如 图 3-1 所 示 。 
(1) 在 当前 项 目的 css 文件 夹 中 新 建 CSS 文件 3-1-3.css， 代 码 如 下 。 


textl{ 
font-size:18pX: 
color:red:; 
} 
(2) 在 当前 项 目 中 ， 新 建 一 个 名 为 3-1-3.html 的 网 页 文件 ， 代 码 如 下 。 
<html> 
<head> 
<title>CSS 样式 </title> 
<link rel="stylesheet" type="text/css" hre="css/3-1-3.css" /> 
</head> 
<body> 
<p class="text1"> 此 行文 字 被 定义 为 红色 显示 </p> 
<p> 此 行文 字 没 有 定义 显示 样式 </p> 
<body> 
<html> 
(3) 在 浏览 器 中 浏览 该 网 页 文件 ， 效 果 如 图 3-1 所 示 。 
【说 明 】 代 码 中 的 第 1 个 段落 标签 使 用 链 入 外 部 样式 表 文件 中 定义 的 textl 类 样式 ， 此 行文 
字 将 显示 18px 大 小 的 红色 文字 ; 而 第 2 个 段落 标签 没有 被 定义 , 将 按照 默认 的 设置 显示 文字 
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CSS 选择 器 


要 想 将 CSS 样式 应 用 于 特定 的 HTML 元 素 ， 首 先 需 要 找到 该 目标 元 素 。 在 CSS 中 ， 执 行 
这 一 任务 的 样式 规则 部 分 被 称 为 选择 器 。 选 择 器 决定 了 格式 化 将 应 用 于 哪些 元 素 。 


3.2.1 案例 分 析 


【案例 展示 】 使 用 链 入 外 部 样式 表 的 方法 制作 企业 简介 局 部 页 面 ， 本 例文 件 3-2.html 在 浏览 
器 中 的 显示 效果 如 图 3-2 所 示 。 


公司 成 立 于 2008 年 ， 照明 亮 ( 2 拥有 国家 一 级 工程 施工 资质 ， 同 时 也 是 一 家 集 市 政 路 灯 、 户 外 亮 化 、 照 
明 工 程 设计 、LED 室 内 销售 及 施工 为 一 体 的 大 型 专业 化 "照明 工程 "公司 , 

公司 现 有 员工 中 专 及 以 上 学 历 的 占 66.9% ， 中 级 工程 师 占 32.8% ， 高 级 工程 师 占 11.2%。 现 已 形成 一 支 技术 精 温 ， 言 有 效 业 ， 创 新 
精神 的 专业 技术 型 人 才 队 伍 。 是 中 国 照明 行业 ， 城 市 及 道路 志明 专业 施工 一 级 资质 的 企业 ， 能 为 客户 提供 独具匠心 的 照明 设计、 环保 
节能 的 产品 配置 ， 既 济 浆 惠 的 造价 理念 、 一 站 式 亮 化 照明 解决 方案 和 充 善 的 售后 服务 保障 

公司 在 员工 的 不 懈 努 力 和 社会 各 界 的 支持 下 ， 经 过 7 年 多 的 发 展 ， 已 由 普通 的 城市 及 道路 照明 三 级 资质 晋升 为 中 国 一 级 施工 企业 。 
公司 严格 尊 守 1509001 质 量 保 证 体系 ， 茉 区 全 | 于 业 "AAA 级 施工 单位 "、" 质 量 优 、 信 党 好 先进 单位 "、“ 质 量 信得过 单 位 "等 等 ， 
是 "政府 采购 " 阁 选 优良 工程 施工 单位 ， 是 中 电器 协会 会 员 单位 ， 同 时 也 是 中 国 照 明 电 器 协会 LED 生 产 专业 委员 会 委员 。 

公司 立足 广东 中 山 ， 辐 射 全 国 ， 是 LEI LED 景 观 亮 化 、LED 吕 示 屏 、 太 阳 能 照明 、 风能 照明 、 风 光 两 能 照明 、 光 导 照 明 、 光 
纤 照明 及 补 光照 明 工 程 公司 ， 做 中 国 照明 行业 一 流 企业 是 我 们 的 目标 。 在 今后 的 企业 发 展 道路 上 ， 朋 我们 专业 的 照明 技术 为 智慧 城市 
及 道路 照明 的 节能 环保 ， 创 造 舒适 亮 化 的 光环 境 ! 


图 3-2 企业 简介 局 部 页 面 


【知识 要 点 】 常 用 的 CSS 选择 器 ， 在 网 页 中 引用 CSS。 
【学 习 目 标 】 掌 握 CSS 的 定义 与 使 用 方法 。 


3.2.2 CSS 样式 规则 


CSS 为 样式 化 网 页 内 容 提供 了 一 条 捷径 ， 即 样式 规则 ， 每 条 规则 都 是 单独 的 语句 。 样 式 表 
的 每 条 规则 都 有 两 个 主要 部 分 : 选择 器 (selectoD 和 声明 (declaration)。 
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CSS 控制 网 页 内 容 显示 格式 的 方式 是 通过 许多 定义 的 样式 属性 (如 字号 、 段 落 控 制 等 ) 来 实 
现 的 ， 并 将 多 个 样式 属性 定义 为 一 组 可 供 调用 的 选择 器 (selector)。 其 实 ， 选 择 器 就 是 某 个 样式 
的 名 称 ， 称 为 选择 器 的 原因 是 ， 当 HTML 文档 中 的 某 元 素 要 使 用 该 样式 时 ， 必 须 利 用 该 名 称 来 
选择 样式 。 用 户 只 需要 通过 选择 器 对 不 同 的 HIML 标签 进行 控制 ， 并 赋予 各 种 样式 声明 ， 即 可 
实现 各 种 效果 。 声 明 由 一 个 或 多 个 属性 值 对 组 成 。 

样式 规则 的 语法 为 : 

selector{ 属 性 :属性 值 [[; 属性 :属性 值 ]…]} 

语法 说 明 : 

selector 表示 希望 进行 格式 化 的 元 素 ， 声 明 部 分 包含 在 选择 器 后 的 大 括号 中 ， 用“ 属性: 属 
性 值 ”描述 要 应 用 的 格式 化 操作 。 

例如 ， 如 图 3-3 所 示 ， 分 析 一 条 CSS 规则 。 

e@ 选择 器 : p 代表 CSS 样式 的 名 称 。 

e@ ”声明 : 声明 包含 在 一 对 大 括号 “{} ”内 ， 用 于 告诉 浏览 器 如 何 泻 染 页 面 中 与 选择 器 相 匹 

配 的 对 象 。 声 明 内 部 由 属性 及 属性 值 组 成 ， 并 用 冒号 隔 开 ， 以 分 号 结束 ， 声 明 的 形式 
可 以 是 一 个 或 多 个 属性 的 组 合 。 
e 属性 : 定义 的 具体 样式 (如 颜色 、 字 体 等 )。 
e 属性 值 ， 属性 值 放 置 在 属性 名 和 冒号 后 面 ， 具 体内 容 随 属性 的 类 别 而 呈现 不 同形 式 ， 
一 般 包 括 数值 、 单 位 以 及 关键 字 。 
属性 局 性 伪 ”局 性 。 展 性 从 


图 3-3 CSS 规 则 


例如 ， 将 HTML 中 <body> 和 </body> 标 签 内 的 所 有 文字 设置 为 “华文 中 宋 ”、 文 字 大 小 为 
12px、 黑 色 文字 、 白 色 背 景 显 示 ， 只 需要 在 样式 中 做 如 下 定义 : 


body 

上 
font-family:" 华 文中 宋 ": 上 # 设 置 字体 所 
font-size:12 px: 上 # 设 置 文字 大 小 为 12px*/ 
color#000: 上 # 设 置 文字 颜色 为 黑色 所 
background-color#ffF 片 设置 背景 颜色 为 白色 */ 


} 
从 上 述 代码 片段 中 可 以 看 出 ， 这 样 的 结构 对 于 阅读 CSS 代码 十 分 清晰 ， 为 方便 以 后 编辑 ， 
还 可 以 在 每 行 后 面 添加 注释 说 明 。 为 了 节省 空间 ， 可 以 将 上 述 代码 改写 为 如 下 格式 : 


body {font-family:" 华 文中 宋 "font-size:12 px:color#000:background-color#fEF} 
必定 义 body 的 样式 为 : 12px 大 小 的 黑色 华文 中 宋 字 体 ， 且 背景 颜色 为 白色 */ 
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3.2.3 CSS 基础 选择 器 


CSS 中 的 基础 选择 器 有 标签 选择 器 、 类 选择 器 、id 选择 器 、 通 配 符 选择 器 、 标 签 指定 式 选 
择 器 、 后 代 选 择 器 和 并 集 选 择 器 ， 对 它们 的 具体 解释 如 下 。 


1. 标签 选择 器 


标签 选择 器 是 指 用 HTML 标签 名 称 作为 选择 器 ， 按 标签 名 称 分 类 ,为 页 面 中 的 某 一 类 标签 
指定 统一 的 CSS 样式 。 其 基本 语法 格式 为 : 
标签 名 {属性 1: 属 性 值 1; 属 性 2: 属 性 值 2: 属性 3: 属 性 值 3:} 
该 语法 中 ， 所 有 的 HTML 标签 名 称 都 可 以 作为 标签 选择 器 ， 如 body、hl、p、strong 等 。 
用 标签 选择 器 定义 的 样式 对 页 面 中 该 类 型 的 所 有 标签 都 生效 。 
例如 ， 可 以 使 用 p 选择 器 定义 HIML 页 面 中 所 有 段落 的 样式 ， 示 例 代码 为 : 
Pp {font-size:12px:color#666:font-family: "微软 雅 黑 "; } 
上 述 CSS 样式 代码 用 于 设置 HTML 页 面 中 所 有 段落 文本 的 样式 ， 字 体 大 小 为 12 像素 、 颜 
色 为 #666、 字 体 为 微软 雅 黑 。 
标签 选择 器 最 大 的 优点 是 能 快速 地 为 页 面 中 同类 型 的 标签 统一 样式 , 同时 这 也 是 它 的 缺点 ， 
因为 不 能 设计 差异 化 的 样式 。 
2. 类 选择 器 
类 选择 器 使 用 “.”( 英 文 点 号 ) 进 行 标识 ， 后 面 紧 跟 类 名 ， 其 基本 语法 格式 为 : 
.类 名 《属性 1: 属 性 值 1: 属 性 2: 属 性 值 3: 属性 3: 属 性 值 3:} 
该 语法 中 ， 类 名 即 HIML 元 素 的 class 属性 值 ， 大 多 数 HIML 元 素 都 可 以 定义 class 属性 。 
类 选择 器 最 大 的 优势 是 可 以 为 元 素 对 象 定义 单独 或 相同 的 样式 。 
【 例 3-2-1】 类 选择 器 的 使 用 , 本 例 在 浏览 器 中 的 显示 效果 如 图 3-4 所 示 , 页 面 文件 3-2-1.html 
的 关键 代码 如 下 。 
<head> 
<meta charset="utf-8"> 
jtle> 类 选择 器 titl 
<style type="text/css"> 
Ted {colorzed:} 


.green{color:green:} 
.font22 {font-size:22px:} 


<h2 class="red"> 二 级 标题 文本 </h2> 
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<p class="egreen ”font22"> 有 段落 一 文本 内 容 </p> 
<p class="red fonD22"> 段 落 二 文本 内 容 <p> 
<p> 段 落 三 文本 内 容 <p> 
<body> 
【说 明 】(1) 在 例 3-2-1 中 ， 为 标题 标签 <h2> 和 第 2 个 段落 标签 <p> 添 加 类 名 class 王 "red"， 
并 通过 类 选择 器 设置 它们 的 文本 颜色 为 红色 。 为 第 1 个 段落 和 第 2 个 段落 添加 类 名 
class="font22", 并 通过 类 选择 器 设置 它们 的 字号 为 22 像素 , 同时 还 对 第 1 个 段落 应 用 类 "green"， 
将 其 文本 颜色 设置 为 绿色 。 之 后 ， 通 过 标签 选择 器 统一 设置 所 有 的 段落 字体 为 微软 雅 黑 ， 同 时 
加 下 画 线 。 
(2) 在 图 3-4 中 , “二 级 标题 文本 ”和 “段落 二 文本 内 容 ” 均 显示 为 红色 ， 可 见 多 个 标签 可 
以 使 用 同一 个 类 名 , 这 样 可 以 实现 为 不 同类 型 的 标签 指定 相同 的 样式 。 同 时 一 个 HIML 元 素 也 
可 以 应 用 多 个 class 类 ， 设 置 多 个 样式 ， 在 HIML 标签 中 多 个 类 名 之 间 需 要 用 空格 隔 开 ， 比 如 
例 3-2-1 中 的 前 两 个 <p> 标 签 。 
(3) 类 名 的 第 一 个 字符 不 能 使 用 数字 ， 并 且 严 格 区 分 大 小 写 ， 一 般 采 用 小 写 的 英文 字符 。 
3. id 选择 器 
id 选择 器 使 用 “#” 进 行 标识 ， 后 面 紧 跟 id 名， 其 基本 语法 格式 为 : 
胡 d 名 {属性 1: 属 性 值 :属性 2: 属 性 值 2: 属 性 3: 属 性 值 3:} 
该 语法 中 ,id 名 即 HTML 元 素 的 id 属性 值 。 大 多 数 HTML 元 素 都 可 以 定义 id 属性 ,元素 
的 id 值 是 唯一 的 ， 只 能 对 应 于 文档 中 某 个 具体 的 元 素 。 
【 例 3-2-2Jid 选择 器 的 使 用 , 本 例 在 浏览 器 中 的 显示 效果 如 图 3-5 所 示 , 页 面 文件 3-2-2.html 
的 关键 代码 如 下 。 
<head> 
<meta charset="utf-8"> 
<title>id 选择 器 </title> 
<style type="text/css"> 
#bold {font-weight:bold:} 
#font24 {font-size:24px:} 


</style> 
</head> 


<body> 
<p id="bold'"> 段 落 1: id="bold"， 设 置 粗 体 文字 。</p> 
<p id="font24"> 段 落 2:id="font24"， 设 置 字号 为 24px。</p> 
<pid="font24"> 有 段落 3: id="font24"， 设 置 字号 为 24px。</p> 
<p id="bold font24"> 段 落 4: id="bold font24"， 同 时 设置 粗 体 和 字号 24px。</p> 
<lbody> 
【说 明 】Q) 在 例 3-2-2 中 ， 为 4 个 <p> 标 签 同时 定义 了 id 属性 ， 并 通过 相应 的 id 选择 器 设 
置 粗 体 文字 和 字号 大 小 。 其 中 ， 第 2 个 和 第 3 个 <p> 标 签 的 id 属性 值 相同 ， 第 4 个 <p> 标 签 有 
两 个 id 属性 值 。 
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段落 1 : id="bold"”, 设置 粗 体 文字 . 
段落 2 : id= "font24"”, 设置 字号 为 24px。 
段落 3 : id= "font24"， 设置 字 号 为 24px。 


段落 4 : id= "bold font24"， 同 时 设置 粗 体 和 字号 24px。 


图 3-4 使 用 类 选择 器 图 3-5 使 用 id 选 择 器 

(2) 从 图 3-5 容易 看 出 ， 第 2 行 和 第 3 行文 本 都 显示 了 用 #font24 定义 的 样式 。 换 句 话 说 ， 
在 很 多 浏览 器 中 , 同一 个 id 也 可 以 应 用 于 多 个 标签 , 浏览 器 并 不 报错 , 但 这 种 做 法 是 不 允许 的 ， 
因为 JavaScript 等 脚本 语言 调用 id 时 会 出 错 。 另 外, 最 后 一 行 没有 应 用 任何 CSS 样式 , 这 意味 
着 id 选择 器 不 支持 像 类 选择 器 那样 定义 多 个 值 , 类 似 “id 二 "bold font24"” 的 写法 是 完全 错误 的 。 

4. 通配符 选择 器 

通配符 选择 器 用 “*” 号 表示 , 它 是 所 有 选择 器 中 作用 范围 最 广 的 ， 能 匹配 页 面 中 所 有 的 元 
素 。 其 基本 语法 格式 为 : 

* {属性 1: 属 性 值 :属性 2: 属性 值 :属性 3: 属 性 值 3:} 

例如 ， 下 面 的 代码 使 用 通配符 选择 器 定义 CSS 样式 ， 清 除 所 有 HTML 标签 的 默认 边 距 。 

bat 


margin:0; 让 定义 外 边 距 */ 
padding:0; 刻 定 义 内 边 距 */ 
} 
但 在 实际 网 页 开发 中 不 建议 使 用 通配符 选择 器 , 因为 用 它 设置 的 样式 对 所 有 的 HTML 标签 
都 生效 ， 不 管 标签 是 否 需 要 该 样式 ， 这 样 反 而 降低 了 代码 的 执行 速度 。 


5. 标签 指定 式 选择 器 


标签 指定 式 选择 器 又 称 交 集 选择 器 ， 由 两 个 选择 器 构成 ， 其 中 第 一 个 为 标签 选择 器 ， 第 二 
个 为 class 选择 器 或 id 选择 器 ， 两 个 选择 器 之 间 不 能 有 空格 ， 如 h3.special。 
【 例 3-2-3】 标 签 指定 式 选择 器 的 使 用 ， 本 例 在 浏览 器 中 的 显示 效果 如 图 3-6 所 示 ， 页 面 文 
件 3-2-3.html 的 关键 代码 如 下 。 
<head> 
<meta charset="utf-8"> 
<title> 标 签 指定 式 选择 器 的 应 用 <jtitle> 
<style type="text/css"> 
pf color:blue:} 
-Specialf color:green:} 
p .specialf color:red:} 。”/* 标 签 指定 式 选 择 器 */ 
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<syle> 
</head> 
<body> 
<p> 普 通 段落 文本 ( 蓝 色 )</p> 
<p class="special"> 指 定 了 .special 类 的 段落 文本 (红色 )</p> 
<h3 class="special"> 指 定 了 .special 类 的 标题 文本 (绿色 )</h3> 
<body> 


【说 明 】(1) 在 例 3-2-3 中 ， 分 别 定义 了 <p> 标 签 和 .special 类 的 样式 。 此 外 ， 还 单独 定义 了 
p.special， 用 于 特殊 的 控制 。 

(2) 从 图 3-6 容易 看 出 ， 第 二 段 文本 变 成 了 红色 。 可见， 标签 选择 器 p.special 定义 的 样式 仅 
仅 适 用 于 <p class 二 "special "> 标签 ， 而 不 会 影响 使 用 了 .special 类 的 其 他 标签 。 


6. 后 代 选 择 器 


后 代 选 择 器 用 来 选择 元 素 或 元 素 组 的 后 代 ， 其 写法 就 是 把 外 层 标签 写 在 前 面 ， 把 内 层 标签 
写 在 后 面 ， 中 间 用 空格 分 隔 。 当 标签 发 生 嵌 套 时 ， 内 层 标 签 就 成 为 外 层 标签 的 后 代 。 

例如 ， 当 <p> 标 签 内 嵌 套 <strong> 标 签 时 ， 就 可 以 使 用 后 代 选 择 器 对 其 中 的 <strong> 标 签 进 
行 控制 ， 如 例 3-2-4 所 示 。 

【 例 3-2-4】 后 代 选 择 器 的 使 用 ， 本 例 在 浏览 器 中 的 显示 效果 如 图 3-7 所 示 ， 页 面 文件 
3-2-4.html 的 关键 代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title> 后 代 选 择 器 </title> 
<style type="text/css"> 
p strong{color:red:} 证 后 代 选 择 器 */ 
strong {color:blue:} 
</style> 
</head> 
<body> 
<p> 段 落 文本 <strong> 媒 套 在 段落 中 ， 使 用 strong 标签 定义 的 文本 (红色 )。</strong></p> 
<strong> 垦 套 之 外 由 strong 标签 定义 的 文本 ( 蓝 色 )。</strong> 


</body> 
LSJLIEIG _¥ LaJLIEIG Jj 
下 标 于 拭 十 式 运 至 天 的 应 用 X jf x 世 
COfile/W/EVAladLed/chap- 全 : | CGC ©file///E/Aladled/cha.. 雪 : 
ey | 时 本 号 二 在 段 车 中 ， 使 用 strong 标 jt 定义 
指定 了 .special 匡 的 让 六 文本 (红色 ) 的 文本 (红色 ) 。 
指定 了 .special 类 的 标题 文本 ( 绿色 ) | 广 喜 之 外 由 strong 标 记 定 义 的 文本 ( 蓝 色 ) 。 
图 3-6 标签 指定 式 选择 器 的 应 用 图 3-7 后 代 选 择 器 的 应 用 


【说 明 】(D) 在 例 3-2-4 中 ， 定 义 了 两 个 <strong> 标 签 ， 并 将 第 一 个 <strong> 标 签 嵌 套 在 <p> 
标签 中 ， 然 后 分 别 设置 strong 和 p strong 的 样式 。 
(2) 由 图 3-7 容易 看 出 ， 后 代 选 择 器 p strong 定义 的 样式 仅仅 适用 于 嵌 套 在 <p> 标 签 中 的 
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<strong> 标 签 ， 其 他 的 <strong> 标 签 不 受 影响 。 

(3) 后 代 选 择 器 不 限于 使 用 两 个 元 素 ， 如 果 需 要 加 入 更 多 的 元 素 ， 只 需要 在 元 素 之 间 加 上 
空格 即 可 。 在 例 3-2-4 中 ,如 果 <strong> 标 签 中 还 嵌 套 一 个 <em> 标 签 ， 要 想 控制 这 个 <em> 标 签 ， 
就 可 以 使 用 p strong em 选中 它 。 


7. 并 集 选 择 器 


并 集 选择 器 是 用 各 个 选择 器 通过 逗号 连接 而 成 的 , 任何 形式 的 选择 器 (包括 标签 选择 器 、 类 
选择 器 及 id 选择 器 等 )， 都 可 以 作为 并 集 选 择 器 的 一 部 分 。 如 果 某 些 选择 器 定义 的 样式 完全 相 
同 或 部 分 相同 ， 就 可 以 利用 并 集 选择 器 为 它们 定义 相同 的 CSS 样式 。 

例如 ， 在 页 面 中 有 2 个 标题 和 3 个 段落 ， 它 们 的 字号 和 颜色 相同 。 其 中 一 个 标题 和 两 个 段 
落 文本 有 下 画 线 效 果 ， 这 时 就 可 以 使 用 并 集 选 择 器 定义 CSS 样式 ， 如 例 3-2-5 所 示 。 

【 例 3-2-5】 并 集 选择 器 的 使 用 ， 本 例 在 浏览 器 中 的 显示 效果 如 图 3-8 所 示 ， 页 面 文件 
3-2-5.html 的 关键 代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title> 并 集 选择 器 </title> 
<style type="text/css"> 
* 不 同 标签 组 成 的 并 集 选择 器 */ 
h2.h3.p{colorred: font-size:14px:} 
/标签 、 类 、 这 组 成 的 并 集 选 择 器 ?/ 
h3..special.#one {text-decoration:underline:} 
</style> 
</head> 
<body> 
<h2> 二 级 标题 文本 。</h2> 
<h3> 三 级 标题 文本 ， 加 下 画 线 。</h2> 
<p class="special"> 段 落 文本 1， 加 下 画 线 。</p> 
<p> 段 落 文本 2， 普通 文本 。</p> 
<p id="one"> 段 落 文本 3， 加 下 画 线 。</p> 
<body> 


| 
六 DD 并 要 六 各 x 瑟 
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= 级 标 是 文本。 
三 级 标 是 文本 加 下 划 线 ， 
县 车 文本 1 iTFS 疆 ， 
文本 2 ,车 二 文本 . 
文本 3 ,0 五 。 
图 3-8 ”并 集 选 择 器 的 应 用 


【说 明 】(1) 在 例 3-2-5 中 ， 首先 使 用 由 不 同 标签 通过 逗号 连接 而 成 的 并 集 选 择 嚣 h2、h3 和 
Pp 控制 所 有 标题 和 段落 的 字号 和 颜色 。 然 后 使 用 由 标签 、 类 、id 通过 去 号 连接 而 成 的 并 集 选择 
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器 h3、.special 和 #one， 定 义 某 些 文本 的 下 画 线 效 果 。 
(2) 由 图 3-8 容易 看 出 , 使 用 并 集 选择 器 定义 样式 与 对 各 个 基础 选择 器 单独 定义 样式 的 效果 
完全 相同 ， 而 且 以 这 种 方式 书写 的 CSS 代码 更 简洁 、 直 观 。 


3.2.4 ”案例 一 一 制作 企业 简介 页 面 


1. 建立 目录 结构 


在 “案例 ”文件 夹 下 创建 三 个 文件 夹 img、css 和 font， 分 别 用 于 存放 图 像素 材 、 外 部 样式 
表 文 件 和 字体 文件 。 


2. 准备 素材 
将 本 页 面 需 要 使 用 的 图 像素 材 和 字体 文件 分 别 存放 在 文件 夹 img 和 font 下 。 
3. 网 页 结构 文件 


在 当前 项 目 中 ， 新 建 一 个 名 为 3-2.html 的 网 页 文件 ， 代 码 如 下 : 


<html> 
<head> 
<meta charset="utf-8"> 
<title> 企 业 简介 </title> 
<link href="css/3-2.css" type="text/css" rel="stylesheet"> 
</head> 
<body> 
<div class="about"> 
<img src="img/house.jpg"/> 
<p> 公 司 成 立 于 2008 年 ， 是 一 家 专业 照明 亮 化 工程 公司 ，.…… <p> 
<p> 公 司 现 有 员工 中 专 及 以 上 学 历 的 占 66.9%， 中 级 工程 师 ….….</p> 
<p> 公 司 在 员工 的 不 懈 努 力 和 社会 各 界 的 支持 下 ， 经 过 7 年 …...</p> 
<p> 公司 立足 广东 中 山 ， 辐 射 全 国 ， 是 LED 照明 、LED.……</P> 
</div> 
</body> 
<html> 


4. 外 部 样式 表 
在 当前 项 目的 css 文件 夹 下 新 建 一 个 名 为 3-2.css 的 样式 表 文 件 ， 代 码 如 下 : 


.about{ 

width:780px: 

height: auto: 

margin: 20px 0 20px 20px: 
} 
.about img{ 

width:780px: 


和 ss 


第 3 章 CSS 入 门 


} 
.about p{ 
font-family:Tahoma: 
Color-#444: 
font-size:13pX: 
line-height:24px: 
text-indent:2em ; ”/* 首 行 缩 进 两 个 汉字 */ 
margin:Spx; 
5. 浏览 网 页 


在 浏览 器 中 浏览 制作 完成 的 页 面 ， 页 面 的 显示 效果 如 图 3-2 所 示 。 


CSS 属性 单位 


在 CSS 文字 、 布 局 排版 和 边界 等 的 设置 上 ， 常 常会 在 属性 值 后 加 上 长 度 或 百分比 单位 ， 本 
节 将 介绍 长 度 和 百分比 两 种 单位 的 使 用 。 


3.3.1 ”长度 与 百分比 单位 
使 用 CSS 进行 排版 时 ， 常 常会 在 属性 值 后 面 加 上 长 度 或 百分比 单位 。 
1. 长 度 单位 


长 度 单位 有 相对 长 度 单位 和 绝对 长 度 单位 两 种 类 型 。 

相对 长 度 单位 是 指 以 该 属性 前 一 个 属性 的 单位 值 为 基础 来 完成 目前 的 设置 。 

绝对 长 度 单位 将 不 会 随 着 显示 设备 的 不 同 而 改变 。 换 句 话说 , 属性 值 使 用 绝对 长 度 单位 时 ， 
不 论 在 哪 种 设备 上 ， 显 示 效果 都 是 一 样 的 ， 如 屏幕 上 的 lem 与 打印 机 上 的 lcm 是 一 样 长 的 。 

由 于 相对 长 度 单位 确定 的 是 相对 于 另 一 个 长 度 属性 的 长 度 ， 因 而 它 能 更 好 地 适应 不 同 的 媒 
体 ， 因 此 应 首选 它 。 一 个 长 度 的 值 由 可 选 的 正 号 “+” 或 负 号 “-”， 接 着 一 个 数字 ， 后 跟 标 明 
单位 的 两 个 字母 组 成 。 

长 度 单位 见 表 3-1。 当 使 用 pt 作为 单位 时 ,设置 显示 字体 的 大 小 不 同 ， 显 示 效 果 也 会 不 同 。 


表 3-1 长 度 单位 
单 位 描 述 
in 英寸 (inch).lin=72pt 
cm | 厘米 
mm | 毫米 
em | 相当 于 当前 对 象 内 大 写字 母 M 的 宽度 ， 如 2em 等 于 当前 字体 尺寸 的 两 倍 
ex | 相当 于 当前 对 象 内 小 写字 母 x 的 宽度 
pt | 磅 (pO，1 磅 等 于 172 英 二 
pe | 派 卡 pica)， 相 当 于 汉字 新 四 号 铅字 的 尺寸 ，1 派 卡 -12 磅 


像素 (pixeD)， 相 当 于 计算 机 屏幕 上 的 一 个 点 


59 上 


HTML5+CSS3 网 页 设计 基础 


2. 百分比 单位 


百分比 单位 也 是 一 种 常用 的 相对 长 度 类 型 ， 百 分 比值 总 是 相对 于 另 一 个 值 来 说 的 ， 该 值 可 
以 是 长 度 单位 或 其 他 单位 。 在 大 多 数 情况 下 ， 这 个 参照 值 是 该 元 素 本 身 的 字体 尺寸 

一 个 百分比 值 由 可 选 的 正 号 “+” 或 负 号 “-”， 接 着 一 个 数字 ， 后 跟 百 分 号 “%” 组 成。 
如 果 百 分 比值 是 正 值 ， 正 号 可 以 不 写 。 正 负 号 、 数 字 与 百 分 号 之 间 不 能 有 空格 。 例 如 

plline-height200%) 让 本 段 文字 的 高 度 为 标准 行 高 的 两 售 */ 

hr{width:80%} 上 # 水 平 线 长 度 是 浏览 器 窗口 的 80%6*/ 

注意 ， 不 论 使 用 哪 种 单位 ， 在 设置 时 ， 数 值 与 单位 之 间 不 能 加 空格 。 另 外 ， 并 非 所 有 属性 
都 支持 百分比 单位 。 


3.3.2 色彩 单位 


在 HTML 标签 中 只 提供 了 两 种 设置 色彩 的 方法 : 十 六 进 制 数 和 色彩 英文 名 称 。 CSS 则 提供 
了 3 种 定义 色彩 的 方法 : 十 六 进 制 数 、 色 彩 英文 名 称 和 rgb 函数 。 

1. 十 六 进 制 数 色彩 值 

在 计算 机 中 ， 定 义 每 种 色彩 的 强度 范围 为 0~255。 当 所 有 色彩 的 强度 都 为 0 时 ， 将 产生 黑 
色 ; 当 所 有 色彩 的 强度 都 为 255 时 ， 将 产生 白色 。 

在 HTML 中 ， 使 用 十 六 进 制 数 指定 色彩 时 ， 前 面 是 一 个 “#” 号 ， 再 加 上 6 个 十 六 进 制 数 ， 
表示 方法 为 : #RRGGBB。 其 中 , 前 两 个 数字 代表 红 光 (Red) 强 度 , 中 间 两 个 数字 代表 绿 光 (Green) 
强度 ， 后 两 个 数字 代表 蓝光 (Blue) 强 度 。 以 上 3 个 参数 的 取 值 范围 为 00~ 企 。 比 如 红色 、 绿 色 、 
蓝 色 、 黑 色 、 白 色 的 十 六 进 制 颜色 值 分 别 为 : #ff0000、#00ff00、#00000ff、#000000、##EEFEF。 
例如 ， 定 义 p 元 素 中 文本 颜色 为 红色 的 代码 如 下 。 

pfcolorf#ft0000:} 

如 果 十 六 进 制 数 色彩 值 中 各 自 两 位 上 的 数字 都 相同 ， 也 可 缩写 为 姐 GB 的 形式 。 例 如 : 
#cc9900 可 以 缩写 为 #c90。 

2. 用 色彩 名 称 方式 表示 色彩 值 

CSS 中 提供 了 与 HTML 一 样 的 用 色彩 的 英文 名 称 来 表示 色彩 的 方式 , 例如 下 面 的 示例 代码 : 

pt{color:red:} 


3. 用 rgb 函数 表示 色彩 值 

在 CSS 中 ， 可 以 用 rgb 函数 设置 所 需要 的 色彩 ， 其 语法 格式 为 : 

TEgb(R.G.B) 

其 中 ，R 为 红色 值 ，G 为 绿色 值 ，B 为 蓝 色 值 。 这 3 个 参数 可 取 正 整数 值 或 百分比 值 ， 正 


整数 值 的 取 值 范围 为 0-255， 百 分 比值 的 取 值 范围 为 色彩 强度 的 百分比 096~100.0%6， 例 如 下 面 
的 示例 代码 : 
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pfcolorrgb(120.150.20)} 
pfcolorrgb(5096.120.3096)} 


CSS 高 级 特性 


3.4.1 案例 分 析 


【案例 展示 】 制 作 工程 案例 的 局 部 页 面 ， 本 例文 件 3-4.html 在 浏览 器 中 的 显示 效果 如 图 3-9 
所 示 。 


C Ofle//E/A.. 食 | ! 


tp 
016-08-06 投资 ¥8.73 万 


3-9 工程 案例 的 局 部 页 面 


【知识 要 点 】CSS 的 层 受 性 、 继 承 性 及 优先 级 。 
【学 习 目 标 】 灵 活 使 用 CSS 高 级 特性 的 方法 设置 元 素 的 样式 。 


3.4.2 ”CSS 的 层 伙 性 和 继承 性 


CSS 是 层 登 式样 式 表 的 简称 ， 层 释 性 和 继承 性 是 其 基本 特征 。 对 于 网 页 设计 师 来 说 ， 应 深 
刻 理 解 和 灵活 使 用 这 两 个 概念 。 


1. 层 到 性 


层 全 (cascade) 是 指 CSS 能 够 对 同一 个 元 素 应 用 多 个 样式 表 的 能 力 。 前 面 介绍 了 在 网 页 中 插 
入 样式 表 的 3 种 方法 ， 当 这 3 种 方法 同时 出 现时 ， 浏 览 器 会 根据 样式 表 的 优先 级 和 层 登 性 ， 决 
定 采 用 哪个 样式 呈现 内 容 。 一 般 原则 是 ， 最 接近 目标 的 样式 优先 级 最 高 。 高 优先 级 样式 将 继承 
低 优先 级 样式 的 未 重 县 定义， 但 覆盖 重合 的 定义 。 根 据 规定 ， 样 式 表 的 优先 级 别 从 高 到 低 为 : 
内 联 样式 表 、 内 部 样式 表 、 链 接 样式 表 和 默认 浏览 器 样式 表 。 浏 览 器 将 按照 上 述 顺 序 执行 样式 
表 的 规则 。 

样式 表 的 层 登 性 就 是 继承 性 ， 样 式 表 的 继承 规则 是 : 外 部 的 元 素 样式 会 保留 下 来 ， 由 这 个 
元 素 包 含 的 其 他 元 素 继承 。 

【 例 3-4-1】 样式 表 的 层 登 ， 本 例 在 浏览 器 中 的 显示 效果 如 图 3-10 所 示 。 
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在 项 目 中 新 建 页 面 文件 3-4-1.html， 其 关键 代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title> 多 重 样式 表 的 层 到 </title> 
<link rel="stylesheet" type="text/css" href="css/3-4-1.css" /> 
<style type="text/css"> 
D2{ 
text-align:right: 
font-size:16pt: 
上 
</style> 
</head> 


<h2> 文 字 色 彩 为 蓝 色 ， 向 右 对 齐 ， 大 小 为 16pt</h2> 


</body> 
在 css 文件 夹 下 新 建 3-4-1.css 样式 表 文件 ， 代 码 如 下 。 
2{ 
color:blue; 
text-align:left: 
font-size:8pt: 
[EJs 
D SP 
CG | © file///E/AladLed/chapter03/3-4-1.html | 


文字 色彩 为 蓝 色 ,向 右 对 齐 ， 大 小 为 16pt 


3-10 ”<h2> 标 签 的 又 加 样式 
【说 明 】 代 码 中 <h2> 标 签 的 外 部 样式 与 内 部 样式 车 加 后 的 样式 等 价 于 以 下 代码 。 
h2{ 
colorblue: 
text-align:right: 
font-size:16pt: 
} 
上 述 代 码 表示 <h2> 标 签 的 倒 加 样式 效果 为 “文字 色彩 为 蓝 色 ， 向 右 对 齐 ， 大 小 为 16pt”， 
字体 色彩 从 外 部 样式 表 保留 下 来 ， 而 当 对 齐 方式 和 字体 尺寸 各 自 都 有 定义 时 ， 按 照 后 定义 的 优 
先 规则 使 用 内 部 样式 表 的 定义 。 


2. 继承 性 

CSS 的 主要 特征 就 是 继承 (Inheritance), 它 依赖 于 祖先 -子孙 关系 , 这 种 特性 允许 样式 不 仅 应 
用 于 某 个 特定 的 元 素 ， 同 时 也 应 用 于 其 后 代 ， 而 后 代 定义 的 新 样式 却 不 会 影响 父 代 的 样式 。 

根据 CSS 规则 ， 子 元 素 将 继承 父 元 素 的 属性 ， 例 如 : 

body {font-family:" 微 软 雅 黑 ":} 
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通过 继承 ，body 元 素 的 所 有 子 元 素 都 应 该 显示 为 “微软 雅 黑 ”字体 ， 子 元 素 的 子 元 素 也 


= 样 。 
【 例 3-4-2】 Css 继承 示例 , 本 例 在 浏览 器 中 的 显示 效果 如 图 3-11 所 示 , 页 面 文件 3-4-2.html 


的 关键 代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title> 继 承 示例 </tile> 
<style type="text/css"> 
pt 
color-#00f: 上 定义 文字 颜色 为 蓝 色 */ 
text-decoration-underline; 。”/* 增 加 下 画 线 */ 
} 
pem{ 上 # 为 p 元 素 中 的 em 子 元 素 定义 样式 */ 
font-size:24px: 刻 定 义 文字 大 小 为 24px*/ 
color-#00; 让 定 义 文字 颜色 为 红色 */ 
} 
</style> 
</head> 
<body> 
<hl> 初 识 CSS</h1l> 
<p>CSS 是 一 组 格式 设置 规则 ， 能 更 好 地 控制 <em>Web</em> 页 面 的 外 观 。</p> 
<u> 
<li>CSS 的 优点 
<ul> 
<I 记 表现 和 内 容 (结构 ) 分 离 </li> 
< 访 易 于 维护 和 <enw> 改 版 em></li> 
<I> 更 好 地 控制 页 面 布局 </li> 
<h> 
</> 
<li>CSS 设计 与 编写 原则 </li> 
<hl> 
<lbody> 


CGC © file///E/Aladled/chapter03/3-4-2html 六 = 


初 识 CSS 


。 CSS 的 优点 
。 表现 和 内 容 ( 结构 ) 分 高 
。 易于 维护 和 发 拓 
。 更 好 的 控制 页 面 布局 

。 CSS 设 计 与 编写 原则 


图 3-11 CSS 继承 的 浏览 效果 
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【说 明 】Q) 从 图 3-11 的 浏览 效果 可 以 看 出 ， 虽 然 em 子 元 素 重新 定义 了 新 样式 ， 但 其 父 元 
素 p 并 未 受到 影响 ， 而 且 em 子 元 素 中 的 内 容 还 继承 了 p 元 素 中 设置 的 下 画 线 样式 ， 只 是 颜色 
和 字体 大 小 采用 自己 的 样式 风格 。 

(2) 需要 注意 的 是 ， 不 是 所 有 属性 都 具有 继承 性 ，CSS 强制 规定 部 分 属性 不 具有 继承 性 。 
下 面 这 些 属性 不 具有 继承 性 : 边框 、 外 边 距 、 内 边 距 、 背 景 、 定 位 、 布 局 、 元 素 高 度 和 宽度 。 


3.4.3 ”CSS 的 优先 级 


定义 CSS 样式 时 ， 经 常 出 现 两 个 或 更 多 个 规则 应 用 在 同一 元 素 上 的 情况 ， 这 时 就 会 出 现 优 
先 级 的 问题 ， 当 多 个 规则 应 用 到 同一 个 元 素 时 ， 权 重 越 大 的 样式 会 被 优先 采用 。 

【 例 3-4-3】CSS 优先 级 示例 , 本 例 在 浏览 器 中 的 显示 效果 如 图 3-12 所 示 , 页 面 文件 3-4-3.html 
的 关键 代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title>CSS 优先 级 示例 </title> 
<style type="text/css"> 
.Color red {color:red:} 
pfcolorblue:} 
</style> 
</head> 


<p class="color red"> 这 里 的 文字 颜色 是 红色 </p> 
<body> 
LSJLEIGL 3 J 


Wy cst 未 多 x 
C © file///E/Aladled/cha... 让 : 


这 里 的 文字 颜色 是 红色 


图 3-12 CSS 优先 级 示例 效果 


【说 明 】(D 如 上 述 代 码 所 示 ， 预 定义 的 <p> 标 签 样式 和 .color red 类 样式 都 能 匹配 上 面 的 p 
元 素 ， 那 么 <p> 标 签 中 的 文字 该 使 用 哪 一 种 样式 呢 ? 

(2) 根据 规范 ， 通 配 符 选择 器 具有 权重 0， 标 签 选 择 器 (例如 p) 具 有 权重 1， 类 选择 器 具有 
权重 10，id 选择 器 具有 权重 100， 内 联 样式 (style="") 具 有 权重 1000。 选 择 器 的 权重 越 大 ， 规 则 
的 相对 权重 就 越 大 ， 样 式 会 被 优先 采用 。 

(3) 对 于 上 面 的 示例 ， 显 然 类 选择 器 .color red 要 比 标签 选择 器 p 的 权重 大 ， 因 此 <p> 标 签 
中 文字 的 颜色 是 红色 的 。 


3.4.4 ”案例 一 一 制作 工程 案例 局 部 页 面 


1. 准备 素材 
将 本 页 面 需要 使 用 的 图 像素 材 放 在 文件 夹 img 下。 


Le 
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2. 网 页 结构 文件 


在 当前 项 目 中 ， 新 建 一 个 名 为 3-4.html 的 网 页 文件 ， 关 键 代码 如 下 。 


<head> 
<meta charset="utf-8" /> 
<link href="css/3-4.css" rel="stylesheet" type="text/css"> 
<title> 工 程 案例 1</tile> 
</head> 
<body> 
<div> 
<img src= "img/works 1.jpe"/> 
<p class="works name"> 英 伦 风 格 商场 亮 化 工程 夜景 <p> 
<p class="info"> 竣 工时 间 &nbsp:<span class="date">2016-08-06</span> &nbsp:&nbsp: 投 资 &nbsp:<span 
class="num">&yen:8.73 万 </span></p> 
</div> 
</body> 


3. 外 部 样式 表 


在 当前 项 目的 css 文件 夹 下 新 建 一 个 名 为 3-4.css 的 样式 表 文 件 ， 代 码 如 下 。 


body{ 
font-family: "微软 雅 黑 "， /* 字 体 为 "微软 雅 黑 "*/ 
font-size:13px: 上 文字 大 小 为 13px*/ 
color:#333; 让 文字 颜色 为 灰色 */ 
} 
div{ 
Width:250px: 
border: 1px solid #D6D6D6: 
padding:3px: 
margin-bottom:15px : 
} 
img{ 
width:249px: 
height:190px: 
} 
.works_name. info{ A# 项 目 名 称 和 项 目 信息 的 共同 样式 #/ 
line-height:23px: 
padding-left:0 0 0 3px: 
margin:0; 


.works name{ 片 项目 名 称 加 粗 显 示 */ 


‘info{ 
color: #777777:; 
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-info .date{ 
color#4FACCB: 
} 

info mm{ 
color:#FF0000; 

} 


4. 浏览 网 页 

在 浏览 器 中 浏览 制作 完成 的 页 面 ， 页 面 的 显示 效果 如 图 3-9 所 示 。 

【案例 说 明 】 

(1) 从 图 3-9 的 浏览 效果 可 以 看 出 ， 虽 然 #article .works .info 重新 定义 了 新 样式 ， 但 其 父 元 
素 #article .works 并 未 受到 影响 ， 而 且 #article .works .info 子 元 素 中 的 内 容 还 继承 了 父 元 素 
#article .works 中 设置 的 样式 风格 。 

(2) 本 案例 中 多 处 使 用 了 CSS 继承 的 方法 来 设置 元 素 的 样式 ， 例 如 ，#article .works .info、 
#article .works .info .date 和 #article .works .info .num。 利 用 这 种 继承 关系 ， 可 以 大 大 减少 代码 的 
编写 量 。 

(3) 需要 注意 的 是 ， 不 是 所 有 属性 都 具有 继承 性 ，CSS 强制 规定 部 分 属性 不 具有 继承 性 。 
下 面 这 些 属 性 不 具有 继承 性 : 边框 、 外 边 距 、 内 边 距 、 背 景 、 定 位 、 布 局 、 元 素 高 度 和 宽度 。 


名 实 训 


【 实 训 任务 】 制 作 LED 射 灯 详 细 信 息 局 部 页 面 ， 本 例文 件 3-5.html 在 浏览 器 中 的 显示 效果 
图 3-13 所 示 。 


\ [slesl 3] 
/Deommae Cx 


cc | © file:///E:/AladLed/chapter03/3-5.html | : 


对 


LED 射 灯 详细 信息 


LED 产品 尺寸 : 14X 25mim 10*18.5mm 

LED 灯 距 : 01 

。 电压 选择 : 72V 24K 20K 240Y 

工作 温度 : -20X~ 60 亡 

。 包装 选择 : 164F]/50m、155F1J50.3m 

使 用 寿命 : 8 ~ 10587 

超 高 亮度 的 固态 冷光 源 LED 

。 高 效 节能 : 低 功 能 ” 寿 发 执 ”安全 各 由 ( 比 钨 态 二 条 杂 闻 涯 20 上) 
绿色 环保 ， 态 水 萝 矢 外 壬 厦 肝 入 六 所 下 全 

保修 期 : 1 入 


3-13 LED 射 灯 详细 信息 局 部 页 面 


【知识 要 点 】 链 入 外 部 样式 表 、CSS 基础 选择 器 及 文档 结构 。 
【 实 训 目标 】 和 掌握 CSS 的 定义 、 文 档 结构 的 相关 知识 。 
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(1) 准备 素材 。 将 本 页 面 需要 使 用 的 图 像素 材 存放 在 img 文件 夹 下 。 
(2) 在 当前 项 目 中 新 建 网 页 结构 文件 3-5.html， 关 键 代 码 如 下 。 


<head> 
<meta charset="utf-8" 亡 
<link href="css/3-5.css" rel="stylesheet" type="text/css"> 
<title>LED 射 灯 详细 信息 </title> 

</head> 


<div class="led sd _details"> 
<img src="img/led sdljpg" /> 
<h4>LED 射 灯 详 细 信 息 </h4> 
<uP> 
<I>LED 产品 尺寸 : <i>14>25mm 10*18.5mm</i></li> 
<I>LED 灯 距 : <i>0.1 < 人 ><Mi> 
<li> 电 压 选 择 : <i>12V、24V、120V、240V</i><li> 
<li> 工 作 温度 :<i>-20C~ 60C<i><i> 
<1i> 包 装 选择 : <i>164FT/50m、165FT/50.3m</i></li> 
<1i> 使 用 寿命 : <i>8 ~ 10 万 小 时 <ji></li> 
< 这 超 高 亮度 的 固态 冷光 源 LED</li> 
<I 记 高 效 节能 ，< 户 低 功 耗 、 低 发 热 、 安 全 省 电 ( 比 玻璃 需 虹 灯节 省 <span class="number" > 
90%</span> 以 上 )</i></li> 
<I 记 绿色 环保 ，< 记 防水 抗 紫外 线 - 耐用 、 维 护 成 本 低 </i></li> 
<| 户 保修 期 <i><span class="number">1 年 </span></i></l> 
<h> 
</ldiv> 
</body> 
(3) 建立 外 部 样式 表 。 在 当前 项 目的 css 文件 夹 下 新 建 3-5.css 样式 表 文 件 ， 代 码 如 下 。 


/LED 射 灯 产 品 详细 信息 页 面部 分 样式 */ 
led _sd_details{ 
width:780px: 
height:auto; 
margin:20px Opx 20px 20px: 
} 
‘led sd details img{ 
width:250px: 
height:250px: 
float:left: 
margin-right:30px: 
有 
.led sd_details h4{ 
font-size:14px: 
font-weight:600 : 
margin: 10px 0: 
Jed sd details ul{ 


or 
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list-style-position'inside: 。 ”/* 将 列表 修饰 符 定义 在 列表 之 内 */ 
} 
Jed sd details ul li{ 
line-height:22px: 
font-size: 13px: 
} 
Jed sd details number{ 
color: red: 
} 
(4) 浏览 网 页 。 在 浏览 器 中 浏览 制作 完成 的 页 面 ， 页 面 显示 效果 如 图 3-13 所 示 。 
【 实 训 说 明 】 本 例 介绍 了 CSS 样式 规则 、 选 择 器 、CSS 文本 相关 样式 及 高 级 特性 。 为 了 设 
置 页 面 中 需要 特殊 显示 的 文本 ， 还 需要 在 文本 中 典 套 < 这 标签 对 其 进行 单独 控制 。 


本 章 小 结 


本 章 首 先 介绍 了 CSS 的 定义 与 使 用 、CSS 样式 规则 、 引 入 方式 及 CSS 基础 选择 器 ， 然 后 
讲解 了 CSS 属性 单位 以 及 CSS 的 层 县 性 、 继 承 性 及 优先 级 ， 最 后 通过 CSS 修饰 文本 ， 制 作 一 
个 常见 的 LED 射 灯 详细 信息 页 面 。 

通过 本 章 的 学 习 ， 读 者 应 该 对 CSS 有 了 一 定 的 了 解 ， 能 够 充分 理解 CSS 实现 的 结构 与 表 
现 的 分 离 以 及 CSS 样式 的 优先 级 规则 , 可 以 熟练 地 使 用 CSS 控制 页 面 中 的 字体 和 文本 外 观 样式 。 


I 练习 题 


1. 利用 CSS 的 层 全 性、 继承 性 及 优先 级 等 知识 ， 分 析 图 3-14， 说 明 内 行文 字 是 什么 颜色 。 


多 D B33-1 
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你 知道 我 是 什么 颜色 么 ? 
你 知道 我 是 什么 颜色 么 ? 
你 知道 我 是 什么 颜色 么 ? 
你 知道 我 是 什么 颜色 么 ? 


图 3-14 练习 题 1 效果 图 


2. 编写 CSS 相关 规则 ， 使 得 同一 文档 能 够 显示 不 同 风格 的 页 面 ， 图 3-15 所 示 的 页 面 是 没 
有 使 用 CSS 美化 的 文档 ， 图 3-16 所 示 的 页 面 是 通过 CSS 美化 后 的 文档 。 
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eo > el Of Mesf//EjNndied, eienfchapie Net: cn Pb: 


神奇 的 CSS 
学 习 CSg 最 好 办 法 就 是 不 断 的 练习 、 不 断 的 思考、 不 断 的 再 练习 。 


对 于 刚刚 接触 CS999 议 者 ， 面 对 满 篇 的 代码 肯定 显得 无 从 下 手 。 


这 里 给 读者 一 些 工作 经 验 ,希望 能 况 帮 助 读者 提高 编写 代码 的 能 力 : 
掌握 (X)HTML 代 码 中 每 个 标签 的 含义 ; 及 时 查阅 C55 手册 ; 多 做 C55 
布局 网 站 的 练习 ; 在 网 络 中 搜索 并 解决 问题 ; 分 析 、 思 考 C55 布 局 网 
站 的 处 理 方式 总 结 经 验 。 


图 3-15 练习 题 2 图， 无 CSS 样式 效果 图 3-16 练习 题 2 图 ， 应 用 CSS 样式 后 的 效果 


3. 定义 CSS， 使 用 后 代 选 择 器 与 并 集 选择 器 制作 如 图 3-17 所 示 的 页 面 。 
4. 定义 CSS， 制 作 如 图 3-18 所 示 的 页 面 。 
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科技 TEchNoLocy3 


科技 一 般 指 科学 技术 社会 上 习惯 于 把 科学 和 技 
术 连 在 一 起 ， 统 称 为 科学 技术 简称 科技 。 实际 
二 者 既 有 密切 联系 ， 又 有 重要 区 别 。 科 学 解决 
理论 问题 ， 技 术 解决 实际 问题 。 


图 3-17 练习 题 3 效果 图 图 3-18 练习 题 4 效果 图 
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元 素 外 观 修饰 


网 页 设计 中 的 各 种 元 素 包括 文本 、 图 像 、 列 表 、 表 格 和 链接 等 ， 可 以 用 CSS 样式 对 它们 进 
行 设置 以 美化 页 面 。 本 章 将 具体 介绍 页 面 上 各 种 元 素 的 样式 属性 及 其 设置 方法 。 


本 章 的 学 习 目 标 : 

。 掌握 文本 样式 各 个 属性 的 意义 及 其 设置 方法 。 
掌握 图 像样 式 各 个 属性 的 意义 及 其 设置 方法 。 
掌握 列表 样式 的 定义 方法 。 

掌握 表格 样式 的 设置 方法 。 

掌握 综合 应 用 页 面 元 素 外 观 属性 制作 页 面 的 方法 。 


四 I 文本 样式 


4.1.1 案例 分 析 


【案例 展示 】 企 业 文 化 页 面 的 设计 。 
使 用 文本 样式 、 文 本 外 观 样式 定义 企业 文化 页 面 的 样式 ， 本 例文 件 4-1.html 在 浏览 器 中 的 
显示 效果 如 图 4-1 所 示 。 


© | Ole/WEJAadLedychapterow4.1 html 


企业 文化 


价 全 现 : 诚实 于 信 ,JS 向 以人为本, 885 发 展 . /p> 


让 守信 各 全 9 所 价 入 有 ， 下 娃 基 立 相 9 可 本 ; 业绩 向 旦 企业 其 展 扩 大 的 二 择 ; 人 为 本 是 企业 价 估 名 5 
;NR Rp 


发 展 观 令 : 的 工 从 大 了- 


和 济 光 ,需要 企业 IR 要 转 丰 放 展 方式 ， 广 双 内 汪 太 六 长 因 北 ， 企业 要 未 各 强 单 镜 和 于 台 动 ， 结 隐 估 化、 
产业 所 寺 产品 和 最 务 科 是、 淆 让 本 有 和 区 纪 等 玉 全 努力 实现 “就 详 ， 优 染 ， 伏 大 全 了 ” 的 玫 居 理会. 


企业 彩 神 : 乞 天 专业 协同 就 


从 企 使 中 ,吉村 了 务实 衫 入 ; 从 市 二 这 争 中 , 肖 阮 了 专业 铺 六 ; 从 大队 于 中 ， 光大 了 失忆 精神 ; 从 红色 关中 ， 
了 了 幸 击 及 六 这 是 全 休 郧 工 所 共有 89 风 近 和 行为 风 司 - 


图 4-1 企业 文化 页 面 


HTML5+CSS3 网 页 设计 基础 


【知识 要 点 】 字 体 类 型 、 大 小 、 粗 细 、 颜 色 、 修 饰 、 对 齐 方式 、 缩 进 、 行 间距 、 首 字母 样式 、 
字符 间距 、 单 词 间 距 、 大 小 写 转换 、 文 本 阴影 、 长 单词 换行 、 空 白 符 处 理 、 洪 出 文本 处 理 等 。 
【学 习 目 标 】 掌 握 CSS 文本 修饰 的 常用 属性 的 作用 并 灵活 应 用 。 


4.1.2 ”字体 样式 


进行 网 页 设计 时 通常 需要 选择 合适 的 字体 、 字 号 等 文本 样式 。 为 了 方便 控制 页 面 中 文本 的 
样式 ，CSS 提供 了 一 组 字体 样式 属性 。 


1. font-family( 设 置 字体 ) 


语法 : font-family : name 

参数 如 下 。 

name: 字体 名 称 ， 可 以 指定 多 个 字体 ， 中 间 用 逗号 隔 开 。 如 果 浏 览 器 不 支持 前 一 种 字体 ， 
就 用 下 一 个 字体 。 默 认为 宋体 。 

说 明 : 中 文字 体 名 称 和 字体 名 中 有 特殊 符号 的 英文 字体 名 称 需要 加 引号 。 既 有 中 文字 体 又 
有 英文 字体 时 ， 英 文字 体 必须 位 于 中 文字 体 前 。 

示例 : 

pf{font-family: Arial, "Times New Roman"" 宋 体 "," 微 软 雅 黑 ":} 

2. font-size( 设 置 字体 大 小 ) 


语法 : font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | 

length | % 

参数 如 下 。 

e@ xx-small: 最 小 。x-small: 较 小 。small: 小 。medium: 正常 。large: 大 。x-large: 较 大 。 
xx-large: 最 大 。larger: 相对 父 对 象 中 字体 的 尺寸 进行 相对 增 大 ;smaller: 相对 父 对 象 
中 字体 的 尺寸 进行 相对 减 小 。 

e length: 字体 长 度 值 ， 常 用 单位 为 px。 

。 %: 取 值 基于 父 对 象 中 字体 的 尺寸 。 

示例 : 

pf font-family:Arial: font-size:14px:} 

3. font-weight( 设 置 字体 粗细 ) 


语法 : font-weight : normal | bold | bolder | lighter | <integer> 

参数 如 下 。 

e nommal: 正常 的 字体 ， 相 当 于 数字 值 400( 默 认 值 )。 

bold: 粗 体 ， 相 当 于 数字 值 700。 

bolder: 定义 比 继承 值 更 重 的 值 。 

lighter: 定义 比 继承 值 更 轻 的 值 。 

<integer>: 用 数字 表示 文本 字体 粗细 。 取 值 范围 : 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 


和 7> 
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1900， 数 字 越 小 字体 越 细 、 数 字 越 大 字体 越 粗 。 
示例 ; 


pf font-family:Arial, "宋体 ": color:#333333; font-weight : bold:} 


4. font-style( 设 置 字 体 风格 ) 


语法 : font-style : normal | italic | oblique 

参数 如 下 。 

e normal: 指定 文本 字体 样式 为 正常 字体 (默认 值 )。 

e italic: 指定 文本 字体 样式 为 斜体 (对 于 没有 和 斜体 变量 的 特殊 字体 ， 将 应 用 oblique)。 

e ”oblique: 指定 文本 字体 样式 为 斜体 。 

示例 : 

pt{ font-family : Arial, "宋体 "; color : blue; font-style : italic:} 

【 例 4-1-1】 字体 样式 设置 。 本 例 的 浏览 效果 如 图 4-2 所 示 ， 页 面 文件 4-1-1.html 的 关键 代 
码 如 下 。 


font-family: "Times New Roman" , "微软 雅 黑 " ; 
font-size:20px: 


font-family: "Times New Roman" , "微软 雅 黑 "; 


<body> 
<h4> 合 作 项 目 <h4> 
<p> 开 展 新 款 <span> 洗 墙 灯 、LED 点 光源 、LED 投 光 灯 、LED 路 灯头 </span> 等 户外 灯具 批发 和 灯饰 招 
商 加 盟 项 目 。</p> 
<lbody> 
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5. font-face( 综 合 设置 字体 样式 ) 


可 以 用 font 属性 对 字体 样式 进行 综合 设置 。 
语法 : font : font-style font-weight font- size font-family 
说 明 : 使 用 font 属性 时 ， 必 须 按 上 面 语法 格式 中 的 顺序 书写 ， 各 个 属性 以 空格 隔 开 。 


【 例 4-1-2】 字 体 样式 设置 。 用 font 属性 对 字体 样式 进行 综合 设置 。 修 改 例 4-1-1 中 Pp 元素 


的 CSS 样式， 代码 如 下 ， 显 示 效果 如 图 4-2 所 示 。 
pffont italic 500 15px "Times New Roman" ," 微 软 雅 黑 ";} 
6. @font-face( 定 义 服务 器 字体 ) 
语法 : @font-face {font-family: name: src: url;} 
参数 如 下 。 
e ”font-family: 指定 定义 的 服务 器 字体 的 名 称 。 
e@ src: 指定 用 于 定义 服务 器 字体 文件 的 路 径 。 


【 例 4-1-3】 定 义 服务 器 字体 。 本 例 的 浏览 效果 如 图 4-3 所 示 ， 页 面 文件 4-1-3.html 的 关键 


代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title> 字 体 设置 </title> 
<style> 

@font-face { 
font-family:maozedong: 
SIcurl(fontmaozedong.TTf 7) 

} 

.fontl{ 
font-family:maozedong: 
font-size: 28px: 

} 

</style> 
</head> 


<body> 
<p class="font1"> 为 人 民 服 务 </p> 


<p class="fontl"> 人 民 英 雄 永垂不朽 ! </p> 
<body> 
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大 人 久 豚 家 
人 久 类 衣 率 三 1! 
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【注意 】 服 务 器 字体 定义 完毕 后 ， 还 需要 对 元 素 应 用 所 定义 的 字体 。 


4.1.3 文本 外 观 属性 


1. color( 定 义 文本 的 颜色 ) 
语法 : color: 预 定义 的 颜色 值 | 十 六 进 制 |RGB 代码 


参数 如 下 。 

e@ color: 指定 颜色 ， 可 使 用 预定 义 的 颜色 值 (如 red、green、blue 等 )、 十 六 进 制 #RRGGBB 
或 RGB 代码 rgb(r,g,b)。 

示例 : 


pffont-family: Arial, "黑体 "; color#333333:} 


2. text-decoration (定义 字体 修饰 ) 


语法 : text-decoration: underline | overline | line-through | none 
参数 如 下 。 

e@ ”underline: 文本 加 下 画 线 。 

e@ ”overline: 文本 加 上 画 线 。 

e@ line-through: 文本 加 删除 线 。 

enone: 标准 文本 ， 无 修饰 。 

示例 : 

af text-decoration:none:} 族 定义 超 链接 无 修饰 ， 即 去 掉 下 夯 线 */ 
h2{ text-decoration:underline:} 人 # 定 义 h2 加 下 夯 线 */ 


3. text-align( 设 置 文 本 对 齐 方 式 ) 


语法 : text-align: center | left | right | justify 
参数 如 下 。 

e@ ”center: 文本 居中 对 齐 。 

e ”left: 文本 左 对 齐 。 

@ right: 文本 右 对 齐 。 

e@ justify: 文本 两 端 对 齐 。 

示例 : 

ha3 {text-align:center:} 


4. line-height( 设 置 行 间距 ) 


行 间距 就 是 行 与 行 之 间 的 垂直 间距 , 一 般 称 为 行 高 , 在 CSS 样式 中 用 line-height 设置 行 高 。 
语法 : line-height : normal | length | number | % 
参数 如 下 。 
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e@ normal: 设置 默认 行 高 。 

e@ ”length: 设置 固定 的 行 间距 值 ， 常 用 单位 为 pg， 可 以 取 负 值 。 

e@ number: 设置 数字 ， 常 用 单位 为 em。 

e %: 基于 当前 字体 高 度 的 百分比 ， 可 以 取 负 值 。 

示例 : 

p{ line-height:28px; font-size:16px: }  /* 行 高 为 28px， 文 本 为 12px， 两 行 之 间 为 12px 的 空白 */ 

对 块 级 元 素 ， 通 过 设置 行 高 值 为 区 块 的 高 度 值 ， 可 以 实现 内 容 在 区 块 内 垂直 居中 。 

【 例 4-1-4】 通 过 设置 行 高 实现 内 容 垂直 居中 显示 。 本 例 的 显示 效果 如 图 4-4 所 示 ， 页 面 文 
件 4-1-4.html 的 关键 代码 如 下 。 


width:250px; 
height:5Opx: 
border: 1px solid #000000; 
} 
‘hg]l {line-height:SOpx:} 
</style> 
</head> 


<body> 
<uU> 


<li> 本 列表 项 高 度 50px, 没 有 设 行 高 <1i> 
<li> 本 列表 项 高 度 50px, 没 有 设 行 高 <li> 
<li class="hg1"> 本 列表 项 高 度 50px. 设 行 高 50px</1i> 
</l> 
<body> 
【说 明 】1i 为 块 级 元 素 ， 区 块 的 高 度 为 50px， 在 CSS 样式 中 设置 的 行 高 为 50px 后 ， 实 现 
i 内容 在 块 内 垂直 居中 显示 ， 参 见 图 4-4 中 第 三 行 的 显示 效果 。 
5. text-indent( 设 置 首 行 缩 进 ) 
语法 : text-indent : length|% 
参数 如 下 。 
e length: 固定 的 缩 进 值 ， 常 用 单位 为 em， 默 认 值 为 0。 
e@ %: 基于 父 元 素 宽度 的 百分比 加 以 缩 进 。 
示例 : 
p{ font-size:16px; text-indent:2em:} /# 首 行 缩 进 两 个 汉字 ， 即 32px*/ 
6. :first-letter 伪 元 素 (向 文本 的 第 一 个 字母 添加 特殊 样式 ) 


:first-letter 伪 元 素 用 于 指定 元 素 第 一 个 字母 的 样式 。 例如, 首 字符 增 大 、 段 落 首 字 下 沉 等 效果 。 


ze 
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【 例 4-1-5】 段 落 首 字 下 沉 效果 。 本 例文 件 4-1-5.html 的 显示 效果 如 图 4-5 所 示 。 代 码 在 例 
4-1-1 的 基础 上 修改 了 p 标签 的 CSS 样式 ， 并 增加 了 p:firstletter 样式 定义 ， 关 键 代码 如 下 。 


p{ 
font-family: "Times New Roman"," 微 软 雅 黑 ": 
font-size:15px: 
font-weight:500; 
2 
Pp:first-letter{ 
float:left: 片 设置 浮动 ， 可 以 占据 多 行 */ 
fontsize:2em: 。”* 字 体 大 小 为 其 他 字体 的 两 倍 */ 
} 


【说 明 】p:first-letter 定义 段落 中 第 一 个 字符 的 样式 。 
-号 
C | Ofile///E:/Aladled/ch... 廊 | : 


体 列 表 项 高 度 50px 没 有 设 行 高 


体 列 和 项 高 度 50PX 没 有 设 行 高 | 、LED 点 光源 、LED 投 


展 新 款 尝 墙 灯 、 
光 灯 、LED 路 灯头 等 户外 灯具 批发 和 
灯饰 招商 加 盟 项 目 . 


本 列表 项 高 度 50px, 设 行 高 50px 


图 44 设置 行 高 实现 垂直 居中 图 4-5 设置 首 字 下 沉 


7. letter-spacing( 设 置 字符 间距 ) 


语法 : letter-spacing: normal | length 

参数 如 下 。 

e@ normal: 默认 值 ， 相 当 于 值 为 0。 

e length: 定义 字符 间 的 固定 空间 值 ， 常 用 单位 为 px， 可 以 取 负 值 。 
说 明 : letter-spacing 用 于 定义 英文 和 中 文字 符 之 间 的 间距 。 

示例 : 

ptletter-spacing:2px:} 

8. word-spacing( 设 置 单词 间距 ) 


语法 : word-spacing : normal | length 

参数 如 下 。 

e@ ”normal: 默认 值 ， 相 当 于 值 为 0。 

e length: 定义 单词 间 的 固定 空间 ， 常 用 单位 为 pg， 可 以 取 负 值 。 
说 明 : word-spacing 用 于 定义 英文 单词 之 间 的 间距 ， 对 中 文字 符 无 效 。 


77 有 


HTML5+CSS3 网 页 设计 基础 


示例 : 


P{ word-spacing:Spx:} 
9. text-transform( 设 置 文本 大 小 写 转换 ) 


语法 : text-transform : none | capitalize | uppercase | lowercase 
参数 如 下 。 

@ none: 默认 值 ， 不 转换 。 

e@ capitalize: 文本 中 的 每 个 单词 以 大 写字 母 开头 。 

。 uppercase: 全 部 转换 成 大 写字 母 。 

e@ ”lowercase: 全 部 转换 成 小 写字 母 。 


10. text-shadow( 文 本 阴影 ) 


语法 : text-shadow : h-shadow v-shadow blur color 
参数 如 下 。 
eh-shadow: 水 平 阴影 的 位 置 ， 可 以 取 负 值 。 
e@ v-shadow: 垂直 阴影 的 位 置 ， 可 以 取 负 值 。 
e blur: 模糊 的 距离 。 
e color: 阴影 的 颜色 。 
说 明 : h-shadow 取 正 值 时 ， 水平 向 右 投影 ; 取 负 值 时 ， 水 平 向 左 投影 。v-shadow 取 正 值 时 ， 
垂直 向 下 投影 ， 取 人 负 值 时 ， 垂 直 向 上 投影 。 二 者 不 能 省 略 。 
【 例 4-1-6】 文 本 阴影 效果 。 本 例文 件 4-1-6.html 的 显示 效果 如 图 4-6 所 示 ，CSS 样式 代码 
如 下 所 示 。 
用 投影 实现 空心 字 效 果 的 CSS 样式 代码 : 
1{ 
font-family: "微软 雅 黑 ":; 
font-size:60pX: 
color#EEE: 上 # 文 本 颜色 术 
text-shadow:2px 2px 1px #222.-2px -2px 1px #222.2px -2px 1px #222.-2px 2px 1px #222: /* 四 重 投影 , 分 别 
是 右 下、 左上 、 右 上 、 左 下 四 个 方向 的 投影 */ 
文字 阴影 的 CSS 样式 代码 : 
Lt{ 
font-family: "微软 雅 黑 ": 
font-size:60px: 
Color:#222: 
text-shadow:Spx 3px 1px #555;”* 水 平 向 右 5px; 垂直 向 下 3px; 模糊 lpx; 浅 黑色 投影 */ 


zs 
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11. word-wrap( 设 置 允许 长 单词 或 URL 地 址 换行 ) 


语法 : word-wrap : normal | break-word 

参数 如 下 。 

e nommal: 只 在 允许 的 断 字 点 换行 (默认 )。 

@ ”break-word: 在 长 单词 或 URL 地 址 内 部 进行 换行 。 

【 例 4-1-7】 设置 允许 长 单词 或 URL 地 址 换行 。 本 例 在 浏览 器 中 的 显示 效果 如 图 4-7 所 示 ， 
页 面 文 件 4-1-7.html 的 关键 代码 如 下 。 


<b>word-wrap:normal:</b> 

<p> 学 习 资源 :http://www.w3school.com.cn/cssref/</p> 

<b>word-wrap:break-word:</b> 

<p class="p1"> 学 习 资源 : http://www.w3school.com.cn/cssref/</p> 
<body> 


多 [ET 


GC OfileW/EVAladLed/chapt… 如 二 


word-wrap:normal; 


CG Ofle//E/Alad.. 娘 ; | 


好 好 学 习 


http://www.w3schopl.com.cn/cssref/ 


word-wrap:break-word; 


队 习 资源 : 
http://www.w3schol 
[blicom.cn/cssref/ 


好 好 学 习 


图 4-6 文本 阴影 效果 图 4-7 设置 URL 地 址 内 部 换行 


12. white-space( 设 置 空白 符 的 处 理 方式 ) 


语法 : white-space :normal | pre | nowrap 
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参数 如 下 。 
e nomal: 文本 中 的 空格 和 空 行 无 效 ， 被 浏览 器 忽略 (默认 )。 
e pre: 预 格式 化 ， 保 留 空格 和 空 行 ， 按 文档 的 书写 格式 原样 显示 。 
e@ ”nowrap: 强制 文本 不 能 换行 ， 文 本 会 在 同一 行 上 显示 ， 直 到 遇 到 <br> 标 签 为 止 。 内 容 
超出 盒子 边界 也 不 能 换行 ， 当 超出 浏览 器 时 自动 加 滚动 条 。 
【 例 4-1-8】 设 置 页 面 的 程序 代码 按 原样 显示 。 本 例 在 浏览 器 中 的 显示 效果 如 图 4-8 所 示 ， 
页 面 文件 4-1-8.html 的 关键 代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<tite> 程 序 代码 显示 </title> 
<style> 
p{ width:380px; 
border 1px solid #222222; 
white-space:pre: 让 文本 预 格式 化 显示 */ 
} 
</style> 
</head> 
<body> 
main0 
{ 
int is=0; 
for(=1:i<=100;iH+) 
{ 
S=sti; 
} 
printft"1+2+3+...+100=d9%%".s); 
} 
p> 
</body> 


13. text-overflow( 设 置 溢出 文本 的 标记 ) 


语法 : text-overflow : clip | ellipsis | string 
参数 如 下 。 
e clip: 修剪 溢出 文本 ， 不 显示 省 略 符号 “...”。 
e ellipsis: 用 省 略 符号 来 标记 被 修剪 的 文本 。 
e string: 使 用 给 定 的 字符 串 来 表示 被 修剪 的 文本 。 
【 例 4-1-9】 用 省 略 标记 标识 溢出 文本 。 本 例 在 浏览 器 中 的 显示 效果 如 图 4-9 所 示 ， 页 面 文 
件 4-1-9.html 的 关键 代码 如 下 。 
<head> 
<meta charset="utf-8"> 
<title> 文 本 修剪 </title> 


so 
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width:310px: 上 无 序列 表 的 宽度 4 


border:1px solid #000: 。 /#*1px 的 黑色 实 线 边框 */ 
padding: Spx; 上 # 内 边 距 为 5px*/ 


white-space:nowrap; 证 强制 文本 不 能 换行 */ 
overflow:hidden: 证 修剪 溢 出 文本 */ 
text-overflow:ellipsis; 。 ”作用 省 略 标记 标识 被 修剪 的 文本 */ 


<i> 一 带 一 路 国家 基础 设施 发 展 指数 报告 出 炉 。<Ai> 

<1i> 黑 龙 江 5 处 新 建国 家 级 自然 保护 区 公布 。</li> 

<1i> 中 国 老 潜艇 非洲 显 神威 可 为 总 统 护航 还 曾 突破 北约 舰队 。</li> 
< 


<lbody> 

【说 明 】 当 文本 内 容 溢 出 时 ， 用 省 略 标记 表示 溢出 文本 ， 需 要 定义 包含 文本 的 对 象 的 宽度 ， 
并 且 “white-space:nowrap;”“overflow:hidden;” 和 “text-overflow:ellipsis;” 这 三 个 样式 必须 同 
时 使 用 。 


C ©file///E/Aladled/chapter04/4.. 安 ， : 


C © file///E/AladLed/cha... 人 庚 


main() 
{ 


热点 新 闻 


int i,s=0; 
for(i=1;i<=100;i+ +) 
{ 


一 带 一 路 国家 基础 设施 发 展 指数 报告 出 炉 。 
黑龙 江 5 处 新 建国 家 级 自然 保护 区 公布 。 
中 国 老 潜艇 非洲 显 神威 可 为 总 统 护航 还 曾 .… 


s=s+i; 


} 
printf("1+2+3+..+100=d%",s); 


文本 预 格式 化 显示 图 4.9 ”用 省 略 标记 表示 滋 出 文本 


4.1.4 ”案例 制作 
【案例 : 企业 文化 页 面 】4-1html 文档 的 源码 如 下 。 
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<head> 
<meta charset="utf-8"> 
<title> 企 业 文化 <title> 
<style> 
3{ 
font-size:22px: 
Color:#333; 
margin-bottom:10px: 。“”/* 下 外 边 距 为 10px*/ 
| 
p{ 
font-family:" 微 软 雅 黑 "; 
font-size:14px: 
Color:#333; 
text-indent:2em; 上 # 首 行 缩 进 两 个 汉字 ， 即 28px*/ 
line-height28px: 证 行 高 为 28px*/ 
} 
A1{ 
font-size:15px:; 
font-weight:600; 
上 
</style> 
</head> 
<body> 
<h3> 企 业 文化 </h3> 
<hr align="left" width="98%" noshade="noshade"/> 
<p><span class="t1"> 价 值 观 ，</span> 诚 实 守信 ， 业 绩 导 向 ， 以 人 为 本 ， 创 新 发 展 。/p> 
<p> 诚 实 守信 是 企业 的 核心 价值 观 ， 是 建 基 立 业 的 根本 ; 业绩 导向 是 企业 发 展 壮大 的 支撑 ; 以 人 为 本 
是 企业 价值 创造 的 宗旨 ;创新 发 展 是 企业 迎接 挑战 的 动力 。</p> 
<p><span class="t1"> 发 展 观念 ，</span> 做 实 、 做 强 、 做 大 、 做 好 。</p> 
<p> 顺 应 经 济 新 常态 ， 需 要 企业 积极 转变 发 展 方式 ， 实 现 内 涵 式 增长 。 因 此 ， 企 业 要 求 各 级 单位 通过 
创新 驱动 、 结 构 优化 、 产 业 升级 、 提 升 产品 和 服务 质量 、 提 高 效率 和 效益 等 路 径 ， 努 力 实现 ' 做 
实 、 做 强 、 做 大 、 做 好 "的 发 展 理念 。</p> 
<p><span class="tl"> 企 业 精神 : </span> 务 实 专业 协同 奉献 。</p> 
<p> 从 央企 使 命中 ， 汲 取 了 务实 精神 ， 从 市 场 竞争 中 ， 汲 取 了 专业 精神 ， 从 团队 建设 中 ， 汲 取 了 协同 
精神 ， 从 红色 基因 中 ， 汲 取 了 奉献 精神 。 这 是 全 体 员工 所 应 共有 的 精神 风貌 和 行为 风格 。</p> 
<body> 
【案例 说 明 】(1) 标题 “企业 文化 ”及 其 下 方 的 下 画 线 之 间 的 默认 距离 比较 大 ， 为 了 美观 ， 
对 <h3> 标 签 定义 了 margin-bottom:10px: 样 式 ， 设 置 标题 的 下 外 边 距 ， 调 整 二 者 之 间 的 距离 。 
(2) span 标签 是 行 级 元 素 ， 应 用 4 设置 样式 。 


5 可 图 像样 式 
图 像 是 网 页 中 不 可 缺少 的 内 容 ， 它 能 使 页 面 更 加 丰富 多 彩 ， 能 让 人 更 直观 地 感受 网 页 所 要 


和 :> 
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表达 的 信息 。 
4.2.1 ”案例 分 析 


【案例 展示 】 新 闻 动 态 -产品 资讯 局 部 页 面 的 设计 。 


使 用 CSS 设置 图 像 和 文本 样式 ,完成 新 闻 动 态 -产品 资讯 局 部 页 面 的 设计 。 本 例文 件 4-2.html 
在 浏览 器 中 的 显示 效果 如 图 4-10 所 示 。 

【知识 要 点 】 设 置 图 像 边 框 、 图 像 缩放 、 图 像 位 置 、 图 文 混 排 等 。 

【学 习 目 标 】 掌 握 利用 CSS 设置 图 像样 式 的 常用 属性 。 


We 
CG © file///E/AladLed/chapter04/4-2.html 
以 LED 照 明代 蔡 日 光 ， 科 学 家 在 南极 成 功 种 植 蔬菜 


科学 家 们 基于 水 栽培 法 ， 使 用 可 重复 使 用 的 水 循环 与 营养 系统 ， 
同时 ， 以 LED 照 明代 著 日 光 ， 并 仔细 监控 室内 的 二 氧化 碳 。 


德国 位 于 南极 的 诺 伊 迈 尔 三 号 站 (Neumayer Station ID) 的 科学 
家 ， 于 室外 温度 低 于 -20*C 的 条 件 下 ， 在 高 科技 温室 (EDEN-ISS) 成 功 


种 出 了 无 需 泥 士 、 日 光 及 农药 的 蔬菜 ,包括 3.6 千 克 色 拉 生 菜 、18 条 
黄瓜 和 70 颗 小 枕 卜 。 


图 4-10 新 闻 动 态 -产品 资讯 局 部 页 面 
4.2.2 ”设置 图 像样 式 


在 第 2 章 已 经 学 习 过 图 像 元 素 的 基本 知识 ， 下 面 用 CSS 样式 来 设置 图 像 的 大 小 和 边框 。 
1. 设置 图 像 大 小 


要 使 用 CSS 样式 控制 图 像 的 大 小 ， 可 以 通过 width 和 height 两 个 属性 来 实现 。 常 用 的 取 
值 单位 有 px 和 基于 父 元 素 宽度 (高 度 ) 的 百分比 宽度 (高 度 )。 
【 例 4-2-1] 设 置 图 像 的 大 小 。 本 例 在 浏览 器 中 的 显示 效果 如 图 4-11 所 示 , 页 面 文件 4-2-1.html 
的 关键 代码 如 下 。 
<head> 
<meta charset="utf-8"> 
<title> 图 像 大 小 设置 </title> 
<style> 
#box{ 
height:200px: 
Padding:5px: 
border:1px dotted #555555; 


s3 上 
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width:130px: 上 # 绝 对 宽度 为 130px*/ 
height:200px ; ”+ 绝对 高 度 为 200px*/ 


width:30%; 。 ”让 相 对 宽度 为 30%6*/ 
height:50% ; 。 入 相对 高 度 为 50%*/ 
1 
</style> 
</head> 
<body> 
<div id="box"> 
<img sre="img/led jgd?2 jpe" class="img1"> 
<img ste="img/led jgd?2 jpe" class="img2"> 
</div> 
</body> 
【说 明 】 本 例 中 .img2 定义 的 width 和 height 两 个 属性 的 取 值 为 百分比 ， 是 相对 于 “id=box” 
的 div 容器 而 言 的 。 如 果 将 这 两 个 属性 设置 为 相对 于 body 元 素 的 宽度 或 高 度 ， 就 可 以 实现 当 浏 
览 器 窗口 改变 时 ， 图 像 大 小 也 发 生 相应 变化 的 效果 。 
2. 设置 图 像 边框 
用 CSS 样式 设置 图 像 的 边框 时 , 可 以 通过 border-style 属性 设置 边框 线 型 ,通过 border-width 
属性 设置 边框 粗细 ， 通 过 border-color 属性 设置 边框 颜色 。 


【 例 4-2-2】 用 CSS 样式 设置 图 像 的 边框 。 本 例文 件 4-2-2.html 的 显示 效果 如 图 4-12 所 示 。 
在 例 4-2-1 的 基础 上 ， 修 改 CSS 样式 ， 代 码 如 下 。 


<style> 

imgl{ 
Width:130px: /# 绝 对 宽度 为 130px*/ 
height200px ; /# 绝 对 高 度 200px*/ 
border-style:dotted: /# 点 画 线 边框 所 
border-width:2px: 证 边框 粗细 为 2px*/ 


border-color: 证 F0000: 。”/* 边 框 颜色 */ 
} 
img2{ 
width:130px: 上 # 绝 对 宽度 为 130px*/ 
height200px : 。。 /# 绝 对 高 度 为 200px*/ 
border-style: dotted double solid double: 。“/* 边 框 线 型 依次 为 点 线 、 双 线 、 实 线 、 双 线 */ 


border-width: 2px 4px 3px 4px : 证 边框 粗细 依次 为 2px、4px、3px、4px*/ 
border-color #555 诈 00 手 00 三 00: 人 # 边 框 颜色 为 上 灰色 ， 右 、 下 、 左 红色 所 } 
</style> 


【说 明 】 图 像 ( 即 img 元 素 ) 作 为 HTML 的 一 个 独立 对 象 ， 需 要 占据 一 定 的 空间 。 因 此 ，img 
元 素 在 页 面 中 的 风格 样式 用 盒子 模型 来 设计 。 
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六 图 像 边 框 设 置 ey 
C ©file///E/AladL.. 康 


图 4-11 设置 图 像 大 小 图 4-12 设置 图 像 边 框 


4.2.3 ”案例 制作 


【案例 : 产品 资讯 局 部 页 面 】4-2.html 文档 的 源码 如 下 。 


<head> 

<meta charsef utf8"> 

<title> 产 品 资讯 <ltitle> 

<style> 

img{ 

width:200px: 
height:150px: 
float:left: 让 向 左 浮动 */ 
margin-right:20px; 人 # 右 侧 外 边 距 为 20px*/ 


font-size:14px: 
line-height:22px; 人 # 行 间距 为 22px*/ 
text-indent:2em: 让 自首 缩 进 两 个 字符 */ 
} 
</style> 
</head> 


<body> 
<h4> 以 LED 照明 代替 日 光 ， 科 学 家 在 南极 成 功 种 植 蔬菜 <h4> 
<img stc="img/pro_info 1.jpe" class 一 亡 
<p> 科 学 家 们 基于 水 栽培 法 ， 使 用 可 重复 使 用 的 水 循环 与 营养 系统 ， 同 时 ， 以 LED 照明 代替 日 光 ， 并 
仔细 监控 室内 的 二 氧化 碳 。</p> 
<p> 德 国 位 于 南极 的 诺 伊 迈 尔 三 号 站 (Neumayer Station ID 的 科学 家 , 于 室外 温度 低 于 -20°C 的 条 件 下 ， 
在 高 科技 温室 EDEN-ISS) 成 功 种 出 了 无 需 泥土 、 日 光 及 农药 的 蔬菜 ， 包 括 3.6 千克 色拉 生菜 、 
18 条 黄瓜 和 70 颗 小 萝卜 。</p> 
</body> 
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【案例 说 明 】 在 图 像 标 签 <img> 的 CSS 样式 中 ， 用 属性 “Hoatleft ”实现 了 图 片 和 文字 混 排 


的 功能 。 


列表 样式 


使 用 列表 进行 布局 设计 ， 不 仅 结构 清晰 ， 而 且 代码 量 明显 减少 。 网 页 上 的 导航 和 各 种 新 闻 
列表 用 列表 实现 ， 非 常 整齐 直观 ， 方 便 用 户 理解 和 单 击 。 


4.3.1 


案例 分 析 


【案例 展示 】 工 程 案 例 -客户 案例 展示 页 面 。 
使 用 CSS 设置 列表 样式 的 基本 知识 ， 制 作 工程 案例 的 客户 案例 展示 局 部 页 面 ， 本 例文 件 


4-3.html 


四 客户 案例 展示 


在 浏览 器 中 的 显示 效果 如 图 4-13 所 示 。 


CG © fileVWEVAladLed/chapter04/4-3.html 


英伦 风格 商场 亮 化 工程 夜景 内 蒙古 广场 夜景 亮 化 工程 


7 天 酒店 亮 化 工程 
工时 间 2015-03-21 ¥12.33 万 说 


Yl11.32 万 间 2016-08-0 ¥8.73 万 


城市 步行 街 夜景 郭 化 长 乐 首席 观 江 豪 号 夜景 城市 公园 景观 路 灯 夜 景 
座 工 时 间 竣工 时 间 2 扫 ¥4.17 万 


j 间 2015-06-21 投资 #11.08 万 018-03-06 投资 和 .32 万 安 工 四 人间 2017-04-28 控 


图 4-13 工程 案例 -客户 案例 展示 页 面 


【知识 要 点 】 设 置 列表 类 型 、 列 表 项 目 符号 及 位 置 的 属性 和 方法 。 
【学 习 目 标 】 掌 握 CSS 设置 列表 样式 的 常用 属性 和 方法 。 


4.3.2 


设置 列表 项 的 标记 类 型 


通常 ， 项 目 列表 主要 采用 <ul> 或 <oP> 标 签 ， 然 后 配合 <l 谊 标签 列 出 各 个 列表 项 。 在 CSS 样 
式 中 ， 列 表 项 的 标记 类 型 是 通过 属性 list-style-type 来 设置 的 。 
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list-style-type 属性 主要 用 于 设置 列表 项 的 标记 类 型 ， 例 如 ， 在 一 个 无 序列 表 中 ， 列 表 项 的 
默认 标记 是 出 现在 各 列表 项 旁边 的 圆 点 ;而 在 有 序列 表 中 ， 标 记 可 能 是 字母 、 数 字 或 另外 某 种 
符号 。list- style-type 属性 常用 的 属性 值 见 表 4-1。 


表 4-1 常用 的 list-style-type 属性 值 


列表 类 型 list-style-type 属性 值 说 明 
disc 默认 值 ， 标 记 是 实心 圆 
无 序列 表 circle 标记 是 空心 圆 
<u> square 标记 是 实心 正方 形 
none 不 显示 任何 符号 
Upperalpha 标记 是 大 写 英文 字母 ， 如 A .B,C,EE,… 
有 序列 表 lower-alpha 标 站 是 小 可 美文 浊 如 ab.cdef... 
Se -Toman 标记 是 大 写 罗马 字母 ， 如 LILIILIV:V:VL.… 
lower - roman 标记 是 小 写 罗马 字母 ， 如 iiiiiiiv.v,vi..… 
decimal 标记 是 数字 
在 页 面 中 使 用 列表 时 ， 可 以 根据 实际 情况 选用 不 PE WP 


同 的 列表 项 标记 作为 修饰 符 ， 也 可 以 不 选用 列表 项 萎 D3 x Cu 


标记 。 


【 例 4-3-1】 设置 列表 项 标记 类 型 。 本 例 在 浏览 器 
中 的 显示 效果 如 图 4-14 所 示 ， 页 面 文件 4-3-Lhtml 的 产品 中 心 


关键 代码 如 下 。 
LED 景 观 路 灯 
<head> LED 圳 虹 灯 
<meta charset="utf-8"> LED 瓦 楞 灯 
<title> 无 序列 表 </title> 人 
> 人 LED 墙 角 灯 


list-style-type:circle;: 。”* 标 记 类 型 是 空心 圆 */ 


} 
list{ 


| C [OfleWE/… 衣 | 


4-14 设置 列表 项 的 标记 类 型 


list-style-type:square; 。” 族 标 记 类 型 是 实心 正方 形 */ 


} 


</style> 


</head> 
<body> 


<h3> 产 品 中 心 <h3> 


<uP 


<li>LED 景观 路 灯 </li> 
<I>LED 瓦楞 灯 </li> 

<Ii>LED 数码 灯 </i> 
<liclass="st">LED 点 光源 </li> 
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<liclass="st">LED 墙角 灯 </li> 
</u> 
</body> 
【说 明 】 当 给 <ul> 或 <o> 标 签 设置 list-style-type 属性 时 ， 在 它们 中 间 的 所 有 <1 这 标签 都 采用 
该 设置 ， 而 如 果 对 <li> 标 签单 独 设置 list-style-type 属性 ， 则 仅仅 作用 在 该 列表 项 上 。 例 如 ， 页 
中 应 用 “.st” 样 式 的 列表 项 ， 类 型 变 成 了 实心 正方 形 ， 但 是 并 没有 影响 其 他 列表 项 的 类 型 ( 空 
心 圆 )。 


4.3.3 设置 列表 项 的 标记 位 置 


list-style-position 属性 用 于 声明 列表 标记 相对 于 
列表 项 内 容 的 位 置 ,属性 值 为 outside( 外 部 ) 或 inside( 内 产品 中 心 


C OfileWEAA 食 | !i 


部 )。 使 用 outside 属性 值 (默认 值 )， 保 持 标 记 位 于 文本 LED 景 观 路 灯 
的 左 侧 , 放置 在 文本 以 外 , 环绕 文本 不 根据 标记 对 齐 。 HE 
使 用 inside 属性 值 ， 列 表 项 标记 放置 在 文本 以 内 ， 像 
插入 到 列表 项 内 容 最 前 面 的 行内 元 素 一 样 ， 环 绕 文本 Fe | 
ee | LED 点 光源 
人 Fagsr | 
【 例 4-3-2】 设置 列表 项 的 标记 位 置 。 本 例 在 浏览 
器 中 的 显示 效果 如 图 4-15 所 示 ， 页 面 文件 4-3-2.html -一 一 一 一 -一 一 一 : 
的 关键 代码 如 下 。 图 4-15 设置 列表 项 的 标记 位 置 
<head> 
<meta charset="utf-8"> 
<title> 列 表 项 标记 位 置 </tile> 
<style> 
uf{ 
height:100px: 
border: 1px solid #999;/* 增 加 边框 显示 无 序列 表 的 宽 和 高 */ 
li{ 
line-height:22px: 


border:1px solid #333;/* 增 加 边框 突出 显示 效果 */ 
} 
ul.oustside{ 
list-style-position:outside; /* 将 列表 项 的 标记 放置 在 文本 以 外 */ 
} 
ulinside{ 
list-style-position: inside: /* 将 列表 项 的 标记 放置 在 文本 以 内 */ 
9 
</style> 
</head> 
<body> 
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<h3> 产 品 中 心 <h3> 
<ul class="oustside"> 
<I>LED 景观 路 灯 <Ai> 
<I>LED 需 虹 灯 </i> 
<I>LED 瓦楞 灯 </i> 
<Ii>LED 数码 灯 </> 
< 
<ul class="inside"> 
<liclass="st">LED 点 光源 </li> 
<li class="st">LED 墙角 灯 </li> 
<hb> 
lbody> 


4.3.4 “案例 制作 


【案例 : 客户 案例 展示 页 面 】 在 HBuilder 中 的 制作 过 程 如 下 。 
(1) 创建 项 目 ， 把 需要 的 图 片 文件 复制 到 img 文件 夹 中 ， 如 果 已 建 项 目 ， 则 将 图 片 素材 复 
制 到 已 建 项 目的 img 文件 夹 中 。 
(2) 创建 网 页 结构 文件 ， 在 当前 项 目 中 创建 一 个 HTMLS5 网 页 文件 ， 文 件 名 为 4-3.html。 
在 页 面 中 创建 无 序列 表 ， 列 表 项 为 图 片 和 文字 。 代 码 如 下 。 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 展 示 <ltitle> 
<link href="css/4-3.css" type="text/css" rel="stylesheet"> 
</head> 
<body> 
<Ul> 
<> 
<a href="works_show.html"><img src="img/works_1.jpe"/></a> 
<p class="works name"> 英 伦 风 格 商场 亮 化 工程 夜景 <p> 
<p class="info"> 竣 工时 间 &nbsp:<span class="date">2015-03-21</span> &nbsp:&nbsp: 投 资 &nbsp: 
<span class="num">&yen:12.33 万 </span></p> 
<> 
<l> 
<a href="#"><img ste="img/works 2jpg"/></a> 
<p class="works_name"> 内 蒙古 广场 夜景 亮 化 工程 </p> 
<p class="info"> 竣 工时 间 &nbsp:<span class="date">2016-07-06</span> &nbsp:&nbsp: 投 资 &nbsp:<span 
class="num">&yen:11.32 万 </span></p> 
< 
<> 
<img stc="img/works 3.jpe"/> 
<p class="works name">7 天 酒店 亮 化 工程 <p> 
<p class="info"> 竣 工时 间 &nbsp:<span class="date">2016-08-06</span> &nbsp:&nbsp: 投 资 &nbsp:<span 
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class="num">&yen:8.73 万 </span></p> 
< 
<> 
<img stc="img/works 4.jpe"/> 
<p class="works_name"> 城 市 步行 街 夜景 亮 化 </p> 
<p class="info"> 竣 工时 间 &nbsp:<span class="date">2015-06-21</span> &nbsp:&nbsp: 投 资 &nbsp:<span 
class="num">&yen:11.08 万 </span></p> 
<> 
<I> 
<img src="img/works 5.jpg"> 
<p class="works_name"> 长 乐 首 席 观 江 豪 宅 夜 景 </p> 
<p class="info"> 竣 工时 间 &nbsp:<span class="date">2018-03-06</span> &nbsp:&nbsp: 投 资 &nbsp: 
<span class="num">&yen:7.32 万 </span></p> 
<> 
<l> 
<img src="img/works_6.jpg"/> 
<p class="works_name"> 城 市 公园 景观 路 灯 夜 景 </p> 
<p class="info"> 竣 工时 间 &nbsp:<span class="date">2017-04-28</span> &nbsp:&nbsp: 投 资 &nbsp: 
<span class="num">&yen:4.17 万 </span></p> 
<> 
<hl> 
<body> 
</html> 
在 没有 用 CSS 样式 时 ， 页 面 上 的 图 片 和 文字 以 无 序列 表 的 样式 显示 ， 显 示 效果 如 图 4-16 
所 示 。 


| © © file///E/AladLed/chapter04/4-3.html 女 | :| 


英伦 风格 商场 亮 化 工程 夜景 
次 工时 间 2015-03-21 投资 ¥12.33 万 


图 4-16 无 css 样式 的 效果 
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G3) 创建 外 部 CSS 样式 文件 来 美化 图 片 和 文字 信息 列表 .在 文件 夹 css 下 新 建 一 个 名 为 4-3.css 
的 样式 表 文件 ， 该 文件 的 代码 及 分 析 如 下 。 

用 * 人 定义 所 有 元 素 默 认 的 内 边 距 和 外 边 距 都 为 0， 容 易 控 制 边 距 进行 布局 。 

*{ ”设置 所 有 元 素 的 默认 样式 */ 
margin:0px; 
Padding:Opx: 
box-sizing:border-box; ”* 元 素 的 宽度 和 高 度 包 括 元 素 的 边框 和 内 边 距 */ 

} 


定义 列表 <ul> 的 宽度 和 高 度 ， 并 且 在 浏览 器 中 水 平 居中 显示 。 


uf{ 
Width:781px; 
height:auto; 证 根据 内 容 自 动 确定 高 度 */ 
list-style:none; 上 # 不 显示 列表 项 的 标记 符号 所 
margin:20px 00 20px: /* 外 边 距 上 和 左 为 20px， 右 和 下 为 Opx*/ 


为 了 实现 <li> 列 表 项 的 横向 排列 ， 使 用 了 属性 “display:inline-block: ”， 设 置 内 边 距 为 3px 
实现 各 个 列表 项 的 内 容 ( 图 片 和 文字 ) 和 边框 保持 3 个 像素 的 距离 。 
ulif{ 
width:257px: 
display:inline-block: 目 定 义 行内 块 级 元 素 */ 
border: 1px solid #D6D6D6; 
padding:3px; 族 内 边 距 ， 上 、 下 、 左 、 右 都 是 3px*/ 
margin-bottom: 15px ; 人 # 下 外 边 距 为 15px*/ 
出 
设置 图 片 的 宽度 和 高 度 ， 这 样 在 页 面 中 就 可 以 省 略 有 关 图 片 大 小 的 代码 ， 简 化 页 面 文件 。 
ulliimg{ 
width:249px: 
height:190px: 
} 
设置 文本 信息 的 样式 ， 为 了 突出 显示 ， 为 不 同 的 文本 定义 不 同 的 颜色 。 


uli.works name,info{ 
font-size:13px: 
line-height:23px: 
margin-left:3px: 片 左 外 边 距 为 3px*/ 
} 
ulli.works name{ 
font-weight-600: 上 刻 加 粗 为 600*/ 
} 
ulli.info{ 
Color:#777777: 
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ulli.info .date{ 
color:#4FACCB: 

uli.info num{ 
color:#FF0000; 

b 


(4) 预览 网 页 ， 显 示 效 果 如 图 4-13 所 示 。 


E 引 I 表格 样式 


前 面 在 第 2 章 中 已 经 介绍 了 表格 的 基本 用 法 , 本 节 讲 解 怎样 用 CSS 表格 属性 来 设置 表格 的 
外 观 样式 ， 实 现 对 表格 进行 美化 。 


4.4.1 案例 分 析 


【案例 展示 】 营 销 动态 -销售 统计 局 部 页 面 。 
使 用 CSS 设置 表格 样式 的 基本 知识 ,制作 营销 动态 -销售 统计 局 部 页 面 ， 本 例文 件 4-4.html 
在 浏览 器 中 的 显示 效果 如 图 4-17 所 示 。 


CG © file///E/AladLed/chapter04/4-4.html 


2018 年 产品 销售 情况 


LED 射 灯 
LED 景 观 灯 
LED 枕 杂 灯 
LED 孝 码 灯 
LED 博 角 灯 
LED 点 光源 


图 4.17 表格 应 用 


【知识 要 点 】 表 格 边框 合并 、 单 元 格 间距 。 
【学 习 目标 】 掌 握 设置 表格 样式 的 常用 属性 。 


4.4.2 ”border-collapse( 设 置 表格 边框 合并 ) 


border-collapse 属性 用 于 设置 表格 的 边框 是 合并 成 单 边框 ， 还 是 分 别 有 自己 的 边框 。 
语法 : border-collapse : separate | collapse 

参数 如 下 。 

@ separate: 边框 分 开 ， 默 认 值 ，border-spacing 和 empty-cells 属性 起 作用 。 
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e@ collapse: 边框 合并 ， 即 两 个 相 邻 的 边框 共用 一 个 边框 。 忽 略 border-spacing 和 
empty-cells 属性 。 
【 例 4-4-1】 设置 表格 边框 样式 。 本 例 在 浏览 器 中 的 显示 效果 如 图 4-18 所 示 。 页 面 文件 
4-4-1.html 的 关键 代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title> 表 格 边框 合并 </tile> 
<style> 
-tf 
border-collapse:collapse: /* 表 格 边框 合并 */ 
width:200px: 
} 
{ 
width:200px: 
了 
</style> 
</head> 
<body> 
<table border="1" class="t1" > 
<caption> 表 格 边框 合并 </caption> 
<t><td>LED 景观 灯 </td><td>LED 需 虹 灯 </td></tr> 
<tr><td>LED 数码 灯 </td><td>LED 墙角 灯 </td></tr> 
‘</table> 
<b> 
<table border="1" class="t2" > 
<caption> 表 格 边框 分 开 </caption> 
<tr><td>LED 景观 灯 </td><td>LED 霓虹灯 </td></t> 
<tr><td>LED 数码 灯 </td><td>LED 墙角 灯 </td></tr> 
</table> 


/body> 


4.4.3 ”border-spacing( 设 置 单元 格 间距 ) 


border-spacing 用 于 设置 相 邻 单元 格 边框 间 的 距离 。 

语法 : border-spacing : length | length 

参数 如 下 。 

e length: 相 邻 单元 格 的 边框 之 间 的 距离 ， 单 位 为 px、cm 等 ， 不 允许 用 负 值 。 

说 明 : 如 果 定 义 一 个 length 参数 ,定义 的 是 水 平和 垂直 间距 ; 如 果 定 义 两 个 length 参数 ， 
第 一 个 设置 水 平 间距 ， 第 二 个 设置 垂直 间距 。 

【 例 4-4-2】 设置 相 邻 单元 格 的 边框 之 间 的 距离 。 在 例 4-4-1html 的 基础 上 , 修改 CSS 样式 ， 
代码 如 下 所 示 。 显 示 效 果 如 图 4-19 所 示 。 

<style> 
uf 
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border-spacing:15px : 。“/* 单 元 格 间距 为 15px， 但 是 不 起 作用 */ 


width:300px: 
border-spacing:15px; 。 /* 单 元 格 间距 为 15px*/ 
} 
</style> 


【说 明 】 只 有 当 表 格 边 框 分 开 (border-collapse:separate) 时 ， 为 border-spacing 属性 设置 的 值 才 
有 效 。 
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表格 边框 合并 
[LED 景观 灯 _ 【LED 露 虹 灯 
LED 数 码 灯 


表格 边框 合并 
LED 景 观 灯 “|LED 需 虹 灯 
LED 数 码 灯 


表格 边框 分 开 ( 默认 ) 
LED 景 观 灯 。 |LED 才 红 灯 
LED 数 码 灯 


表格 边框 分 开 ( 默认 
LED 景 观 灯 _|LED 露 虹 灯 
LED 数 码 灯 | 


图 4-18 表格 边框 合并 图 4-19 设置 表格 边框 间距 


4.4.4 empty-cells( 设 置 是 否 显示 单元 格 边框 ) 


empty-cells 属性 用 于 设置 当 表 格 的 单元 格 无 内 容 时 ， 是 否 显示 单元 格 的 边框。 

语法 : empty-cells : show | hide 

参数 如 下 。 

e show: 在 空 单元 格 周围 绘制 边框 (默认 )。 

@ hide: 不 在 空 单元 格 周围 绘制 边框。 

说 明 : 只 有 当 表 格 的 边框 分 开 (border-collapse:separate)j 时 ， 该 属性 才 起 作用 。 

【 例 4-4-3】 设置 隐藏 空 单元 格 的 边框 。 在 例 4-4-1.html 的 基础 上 ， 修 改 CSS 样式 中 的 .七 样 
式 ， 代 码 如 下 所 示 。 显 示 效 果 如 图 4-20 所 示 。 


.2{ 
width:300px: 
border-spacing:15px: 。”/* 单 元 格 间距 为 15px*/ 
empty-cells:hide; 证 隐藏 空 单元 格 的 边框 */ 


} 
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表格 边框 合并 
[LED 景观 灯 LED 雪 虹 灯 
LED 数 码 灯 


表格 边框 分 开 ， 隐 藏 空 单元 格 边框 
LED 景 观 灯 上 ED 霓虹灯 
LED 数 码 洒 | 


图 4-20 隐藏 空 单元 格 的 边框 


4.4.5 ”caption-side( 设 置 表格 标题 的 位 置 ) 


caption-side 用 于 设置 表格 标题 的 位 置 。 

语法 : caption-side : top | bottom | left | right 

参数 如 下 。 

e top: 把 表格 标题 定位 在 表格 之 上 ， 默 认 值 。 

e ”bottom: 把 表格 标题 定位 在 表格 之 下 。 

e left: 把 表格 标题 定位 在 表格 的 左边 。 

e ”right: 把 表格 标题 定位 在 表格 的 右边 。 

说 明 : caption-side 属性 必须 和 表格 的 <caption> 标 签 一 起 使 用 。 


4.4.6 “案例 制作 


【案例 : 销售 统计 局 部 页 面 】4-4.html 文档 的 源码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title> 销 售 统计 </tile> 
<style> 
h4{ 
text-align:center: 
} 
table{ 
width:650px: 
border 1px solid #666: 证 定义 表格 边框 的 样式 */ 
border-collapse:collapse: /# 合 并 相 邻 单元 格 的 边框 


text-align:center: 
font-family:" 微 软 雅 黑 ": 让 字 体 为 "微软 雅 黑 "*/ 
font-size: 13px: 证 文字 大 小 为 13px*/ 
color:#444444: 让 文字 颜色 为 灰色 */ 
} 

th.td{ 
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height:25px: 
border:1px solid#999 : * 定 义 单元 格 的 边框 样式 */ 
text-align:center: 
} 
th{ 
height28px: 
backeround-color:#eee : 
} 
</style> 
</head> 
<body> 
<table> 
<caption> <h4>2018 年 产品 销售 情况 <h4></caption> 
<t> 
<th> 产 品 </th><th>1 季度 </th><th>2 季度 </th> 
<th>3 季度 </th><th>4 季度 </ 耻 ><th> 小 计 </th> 
</t> 
<t> 
<td>LED 射 灯 </td><td>160</td><td>185</td> 
<td>240</td><td>123</td><td>708</td> 
</> 
<t> 
<td>LED 景观 灯 </td><td>560</td><td>780</td> 
<td>345</td><td>573</td><td>2258</td> 
</> 
<t> 
<td>LED 需 虹 灯 </td><td>380</td><td>280</td> 
<td>420</td><td>345</td><td>1425</td> 
</> 
<t> 
<td>LED 数码 灯 </td><td>560</td><td>590</td> 
<td>645</td><td>620</td><td>2415</td> 
</> 
<t> 
<td>LED 墙角 灯 </td><td>165</td><td>185</td> 
<td>220</td><td>143</td><td>713</td> 
</r> 
<t> 
<td>LED 点 光源 </td><td>258</td><td>280</td> 
<td>315</td><td>245</td><td>1098</td> 
</t> 
<tr><td colspan="5"><strong> 合 计 </strong></td> 
<td><b>8617</b></td> 
</t> 
</table> 
</body> 
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浏览 页 面 ， 效 果 如 图 4-17 所 示 。 
【案例 说 明 】CSS 样式 中 ，table 样式 中 的 边框 样式 是 整个 表格 的 外 边框 样式 。td 和 也 样式 
中 的 边框 样式 是 每 个 单元 格 的 边框 样式 。 


实 训 


【 实 训 任务 】 设 计 首页 - 热 销 产品 局 部 页 面 。 
应 用 表格 技术 、 图 像 和 文字 设计 技术 ， 制 作 首 页 - 热 销 产品 局 部 页 面 。 本 例文 件 4-5.html 在 
浏览 器 中 的 显示 效果 如 图 4-21 所 示 。 
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图 4-21 首页 - 热 销 产品 局 部 页 面 
【知识 要 点 】 文 本 样式 、 图 像样 式 及 图 文 混 排 、 表 格 样式 。 
【 实 训 目标 】 掌 握 用 CSS 样式 设置 文本 样式 、 图 像样 式 和 表格 样式 的 技术 。 
4.5.1 任务 分 析 


1. 页 面 结构 分 析 

这 部 分 页 面 用 表格 进行 布局 设计 , 表格 1 行 8 列 , 奇数 列 放 图 片 ， 偶 数列 放 文本 和 超 链 接 。 

2. 样式 分 析 

(1) “ 热 销 产品 ”页 面 是 首页 上 的 局 部 页 面 ， 网 页 宽度 为 1050px。 本 例 用 表格 实现 布局 ， 
表格 宽度 是 1050px。 

(2) 奇数 单元 格 中 的 图 片 样式 统一 定义 。 

(3) 偶数 列 中 的 文本 标题 用 <h4> 定 义 ， 超 链接 用 CSS 样式 设置 成 按钮 样式 。 
4.5.2 ”任务 实现 

根据 上 面 的 分 析 ， 创 建 网 页 文件 和 外 部 样式 文件 ， 完 成 热 销 产品 局 部 页 面 的 设计 。 

1. 创建 页 面 文件 


(1) 把 图 片 资料 存 入 当前 项 目的 img 文件 夹 中 。 
(2) 在 当前 项 目 中 ， 新 建 一 个 HIML5 文档 ， 文 件 名 为 4-5.html。 
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在 HBuilder 编辑 区 编辑 文件 ， 页 面 文件 的 关键 代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title> 热 销 产品 </title> 
<link href="css/4-5.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<table> 
<t> 
<td><img ste="img/led sdl.jpg" class="img1"></td> 
<td class="td1"><h4>LED 射 灯 <h4> 
专业 技术 <br> 
高 效 耐用 <br> 
<a href="#"> 详 细 信 息 <img src="img/triangle-icon-white png"></a> 
<itd> 
<td><img strc="img/led jgd7jpg" class="img1"></td> 
<td class="td1"><h4>LED 景观 路 灯 </h4> 
优越 品质 <br> 
绿色 环保 <br> 
<a hre 人 ="#"> 详 细 信 息 <img src="img/triangle-icon-white png"></a> 
<itd> 
<td><img src="img/led_nhd]l.jpe" class="img1"></td> 
<td class="td1"><h4>LED 需 虹 灯 </h4> 
领先 科技 <br> 
节能 高 效 <br> 
<a hre 住 "#'> 详 细 信 息 <img src="img/triangle-icon-white.png"></a> 
<itd> 
<td><img src="img/led wldl.jpe" class="img1"></td> 
<td class="td2"><h4>LED 瓦楞 灯 </h4> 
优越 品质 <br> 
优质 体验 <br> 
<a hre 仁 "#f"> 详 细 信息 <img src="img/triangle-icon-white png"></a> 
</td> 


2. 创建 CSS 样式 文件 


创建 外 部 样式 表 文 件 ， 在 当前 项 目的 css 文件 夹 中 新 建 一 个 CSS 文件 ， 文 件 名 为 4-4.css， 
样式 代码 如 下 。 

(D 定义 页 面 的 统一 样式 。 

body{ 


和 ss 
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font-family: "微软 雅 黑 ": /* 字 体 为 "微软 雅 黑 "*/ 
font-size:13px: 上 # 文 字 大 小 为 13px*/ 
Color:#444444: 刻 文 字 颜 色 为 灰色 */ 


(2) 定义 表格 的 样式 和 文本 列 单元 格 的 样式 , 最 右 侧 的 单元 格 不 需要 右边 框 , 定义 样式 .td2。 


table{ 
width:1050px: 
border: 1px solid#DDD: 
padding:Opx: 
margin:0 auto:; 证 左右 居中 对 齐 */ 
} 
-tdl{ 
Vertical-align'top: 
Width:80px: 
border-right: 1px solid #DDDDDD:; 
} 
-td2{ 
width:80px; 
border-right:Opx:; 
} 
(3) 标题 的 样式 ， 通 过 设置 外 边 距 来 控制 标题 与 上 边框 和 下 方 文字 的 距离 。 
h4 {margin:10px Opx Spx Opx:} 
(4) 图 片 的 样式 。 


imgl{ 
Width:160px: 
height:141px: 
} 
(5) 超 链接 的 样式 ， 通 过 CSS 设置 宽 、 高 和 背景 色 ， 设 计 成 按钮 的 样式 。 
af 
display: inline-block: /# 转 换 成 行内 块 元 素 所 
width:75px: 
height:26px: 
backeground-color:#494949:; 
Color:-#FFF : 
text-decoration:none; 
text-align:center: 
margin-top: 15px: 
line-height:26px ; 
} 
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3. 浏览 网 页 
在 Chrome 浏览 器 中 浏览 网 页 ， 显 示 效 果 如 图 4-21 所 示 。 


【 实 训 说 明 】 本 例 可 以 用 无 序列 表 实 现 ， 每 个 列表 项 包括 图 片 和 文本 ， 并 在 一 行 上 显示 , 用 


CSS 进行 样式 控制 。 


本 章 首先 介绍 了 文本 样式 各 个 属性 的 意义 及 其 设置 方法 ， 然 后 介绍 了 图 片 、 列 表 和 表格 的 


样式 设置 方法 ， 最 后 通过 实例 讲解 了 表格 、 图 片 和 文本 在 页 面 设计 中 的 实际 应 用 。 


通过 本 章 的 学 习 ， 读 者 应 该 能 够 掌握 页 面 元 素 的 样式 设置 技术 ， 灵 活 应 用 这 些 技术 进行 网 


页 元 素 的 修饰 ， 设 计 出 美观 大 方 的 网 页 。 


练习 题 


1. 应 用 文本 样式 及 其 属性 ， 设 计 如 图 4-22 所 示 的 页 面 。 


D FE 
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爹 枉 清 酒 斗 十 干 ， 玉 盘 珍 懂 直 万 钱 . 


停 杯 投 革 不 能 食 ， 找 剑 四 攻心 茫然. 
众 岳 黄河 冰 塞 川 ， 插 登 太 行 雪上 陪 天 , 
闲 来 垂钓 全 混 上 ， 忽 复 条 舟 笋 日 边 . 
行路 难 ,行路 难 ， 多 歧路 ， 今 安 在 . 
长 风 破浪 会 有 时 ， 直 洼 云 山 济 沧海 . 


【 空 外 】 
四 阶 狂 : 吕 下 的 菜 前 。 
加 委 的 生 涡 上; 传说 台南 来 通 周文 至 时 ， 首 在 溪 【 今 陕西 宝 驳 市 东南 ) 委 芍 。 
国 季 身 林 日 应 ， 传说 人 急 妖 见 汤 以 首 ， 休 康 舟 过 日 月 之 边 。 舍 用 这 两 避 直 技 ， 是 比 洽 人 主 通 合 无 带 ， 多 出 于 三 钼 - 


【区 村 】 

“行路 难 ”多 写 世 胃 艰 难 ， 夫 学 捕 列 意 。 李 怕 《行路 难 3 共 三 首 ， 莘 嫌 遂 士 加 过 其 一 。 诗 以 “行路 难 ” 比 沫 世 胃 险阻 ， 打 写 了 诗人 在 政治 道路 上 
遵 通 形 难 财 ， 产 生 的 不 可 柳 制 的 激愤 情结 ; 但 好 开 末 园 此 而 放血 对 大 的 政治 理 息 ， 全 难看 起 有 一 天 会 施 展 自 己 的 抱负 ， 杂 现 了 他 对 人 生前 进 示 观 表 过 的 
气 枫 ， 计 满 了 积极 浪漫 主义 的 情 词 。 唐 开 头 写 “ 金 构 美酒 ”、“ 玉 盘 难 锰 ”， 给 人 一 个 欢乐 的 雪人 金 场 面 。 接 看 写 “ 停 杯 投 竺 ”、“ 拔 刻 四 顾 ”， 又 向 污 


者 展现 了 作者 高 情 波涛 的 冲击 。 中间 四 句 ， 醋 襄 叹 “ 冰 记 川 ” 、“ 雪 满 山 ”、 又 狗 然 神游 千 才 之 上 上 ， 看 到 了 吕 尚 、 知 严 息 然 得 到 重用 。“ 行 路 难 ” 四 个 
往 句 ， 又 表现 了 进 遂 而 难 和 继 块 造 求 的 心理 。 并 后 而 句 ， 瑟 自己 理想 荡 有 一 天 能 够 实现 。 全 诗 在 高 度 从 复 与 大 量 应 叹 之 后 ， 以 “长 风 破 法 会 有 时 ”名 开 
民 统 ， 并 且 坚信 美好 前 车 ， 纤 会 到 来 ， 固 两 “ 直 持 云 帆 济 党 海 ”。 激流 进 。 蔓 意 波 洞 起 伙 ， 正 宕 多 妆 = 


图 4-22 习题 1 效果 图 
2. 用 预 格式 化 文本 属性 和 首 字 下 沉 技术 设计 如 图 4-23 所 示 的 页 面 。 
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演 溪 沙 
苏轼 
游 新 水 清泉 寺 ， 寺 临 兰溪 ,溪水 西 流 . 
山下 兰 艺 短 漫 溪 ， 松 间 沙 路 净 无 泥 ， 萧 六 可 雨 子规 哼 。 
谁 道人 生 无 再 少 ? 门 前 流水 尚 能 西 ! 休 将 日 发 唱 黄 鸡 。 
【 简 析 】 
词 人 让 全 生机 生生 和 这 和 中 生生 向 风 和 攻 计 


无 泥 。 时 值 日 莫 ， 松 林 间 的 布谷 鸟 在 澜 满 细 雨 中 啼 叫 。 谁 说 人 老 不 会 再 回 年 少 对 光 呢 ? 你 看 看 ， 那 门 前 的 
流水 尚 能 向 西 奔 流 呢 ! 所 以 ， 不 要 在 老年 感叹 时 光 流 逝 . 


图 4-23 习题 2 效果 图 
3. 用 图 文 混 排 技 术 ， 设 计 如 图 4-24 所 示 的 页 面 。 
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隆 泊 狂 


(1084 - 约 1151 ) 南宋 女 局 人 。 号 易 安 居士 ， 齐 州 京 丘 
〔 今 属 山东 ) 人 。 父 李 格 非 为 当时 铸 名 学 者 ， 夫 赵 明 诚 为 金 
石 。 早期 生活 优 裕 ， 与 明 诚 共同 致力 于 书画 金石 的 搜集 整理 . 
金 兵 入 据 中 原 ， 流离 南 方 ， 明 诚 病死 ， 境 遇 玛 苦 。 所 作词 ， 前 
期 多 写 其 您 用 生活 ， 后 期 多 悲叹 身世 ， 情 凋 感 伤 , 有 的 也 流 需 
出 对 中 原 的 怀念 形式 上 著 用 曰 播 手法 ， 自 壁 途径 ， 语 言 清 


丽 。 论 词 强调 协 律 ， 崇 尚 典雅 、 情 致 ， 提 出 词 “ 别 是 一 家 ”之 
说 ， 反 对 以 作 诗 文 之 法 作词 。 并 能 诗 ， 留 存 不 多 ， 部 分 篇 章 感 
时 咏 史 ， 情 天 慷 慨 ， 与 其 词 风 不 同 。 有 《 易 安居 士 文 储 》、 

《 易 安 词 》 ,已 启 佚 。 后 人 有 《 激 玉 词 》 辑 本 。 今 人 有 《地 清 
照 集 校注 》。 


”以 其 S 与 集 而 得 名 。《 易 安 集 》、《 滞 玉 集 》 ， 宋 人 早 有 著录。 其 词 流传 至 今 的 ， 据 今 人 所 输 约 有 45 
首 , 另存 疑 10 余 首 。 她 的 《 滞 玉 词 》 既 男性 亦 为 之 惊叹 。 她 不 但 有 高 深 的 文学 修养 ， 而 且 有 大 胆 的 创造 精神 。 从 总 的 情况 
看 ， 她 的 创作 内 容 因 她 在 北宋 和 南宋 时 期 生 活 的 变化 而 呈现 出 前 后 期 不 同 的 特点 。 


图 4-24 习题 3 效果 图 
4. 设计 如 图 4-25 所 示 的 导航 ， 用 无 序列 表 实现 。 


图 4-25 习题 4 效果 图 
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5. 用 CSS 样式 设计 如 图 4-26 所 示 的 表格 。 
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姓名 性别 
生日 民族 

条 中 政治 面 纤 照片 
学 历 毕业 学 校 

电话 电子 凶 箱 

住址 

自我 评价 

专业 介绍 

区 交情 “| 

备注 说 明 


图 4-26 习题 5 效果 图 


第 5 
CSS3 选 择 


3 下 攻 | 


选择 器 是 一 种 模式 ， 用 于 选择 需要 添加 样式 的 元 素 。 在 进行 网 页 设计 时 使 用 选择 器 来 选择 
某 些 元 素 进 行 样式 定义 ， 从 而 实现 灵活 的 样式 控制 。 本 章 将 具体 介绍 常用 的 CSS3 选择 器 的 功 
能 和 用 法 。 


本 章 的 学 习 目 标 : 

e 掌握 CSS3 中 新 增 的 属性 选择 器 的 用 法 ， 能 运用 属性 选择 器 选择 页 面 上 的 元 素来 添加 
样式 。 

e 掌握 常用 的 伪 类 选择 器 的 用 法 ， 能 够 为 名 称 相同 或 类 型 相同 的 子 元 素 定义 不 同 的 样式 。 

e 掌握 伪 元 素 选 择 器 的 用 法 ， 能 够 在 页 面 上 的 特定 位 置 插入 需要 的 文字 或 图 片 。 

e 掌握 链接 伪 类 的 用 法 ， 能 够 用 链接 伪 类 实现 页 面 上 超 链接 的 特效 。 


[EU 属性 选择 器 


CSS3 中 新 增 了 3 种 属性 选择 器 ， 
分 别 是 [attribute^value]、[attibute$= | 号 


QI © file///E/Aladled/%20chapter05/5-1.html 


value] 和 [attribute*=value], 使 用 这 些 属 
性 选择 器 ， 可 以 根据 元 素 的 属性 和 属 。。”| 名 点 要 同 


"习近平 腿 里 的 "第 一 资源 "为 何如 此 重要 
。 习近平 要 求 用 这 "三 激 "把 全 面 深化 改革 推 向 深入 
5.1 -1 案例 分 析 ， 习近平 指引 信访 工作 "安民 之 道 ” i 
— i . 应 美 301 调 查 声 明 " 中 的 7 大 细节 
【案例 展示 】 百 度 新 闻 - 热 点 要 闻 es Mii 
局 部 页 面 的 设计 。 "安置 房 宇 置 解 下 日报 慑 批 ; 谁 二 扶贫 对 象 ' 王 步 数 ” 
使 用 CSS3 的 属性 选择 器 ， 为 新 * 国家 药品 监督 管理 局 : 9 家 企业 9 批 次 化 要 品 不 合格 
闻 列 表 中 的 不 同 列表 项 设置 样式 。 本 
例文 件 5-Lhtml 在 浏览 器 中 的 显示 效 * 工 信 吉 :电信 企业 要 自觉 不 在 校园 近 捧 设 点 吾 销 业务 


果 如 图 5-1 所 示 。 下 HD 本 十 济 过 生生 天 让 
"全 国 70 妃 6 月 最 新 房价 出 护 ， 上 涨 城市 高 大 63 个 
， 民 航 局 出 新 政 : 叫 入 特价 机 要 不 能 温 改 签 票 王 条 款 


图 5-1 百度 新 闻 - 热 点 要 闻 局 部 页 面 


HTML5+CSS3 网 页 设计 苦 础 


【知识 要 点 】CSS3 属性 选择 器 [attribute'=value]、[attribute$=value] 和 [attribute*=value] 的 功 
能 、 选 择 元 素 的 方法 。 

【学 习 目标 】 掌 握 CSS3 属性 选择 器 的 作用 并 灵活 应 用 。 
5.1.2 ”El[attribute^=value] 选 择 器 

E[attribute^value] 选 择 器 匹配 属性 值 以 指定 值 value 开头 的 每 个 元 素 。 即 选择 名 称 为 E 的 标 
签 ， 且 该 标签 定义 了 attribute 属性 ，attribute 属性 值 包含 前 级 为 value 的 字符 串 。E 可 以 省 略 ， 
省 略 时 表示 匹配 满足 条 件 的 任意 元 素 。 

例如 ， 设 置 id 属性 值 以 one 开头 的 所 有 div 元 素 的 背景 色 。 


divlid^="one"] 
{ 


background:#ffPRO0: 
} 
说 明 : 只 要 div 元 素 的 id 属性 值 是 以 one 字符 串 开头 的 就 会 被 选中 ， 设 置 指定 的 背景 色 。 
又 如 ， 设 置 class 属性 值 以 con 开头 的 所 有 元 素 的 字体 为 宋体 。 
[class^="con"] 
{ 
font-family:" 宋 体 "; 
} 
说 明 : 省 略 E 表示 匹配 满足 条 件 的 任意 元 素 。 


5.1.3”E[attribute$=value] 选 择 器 


E[attribute$=value] 选 择 器 匹配 属性 值 以 指定 值 value 结尾 的 每 个 元 素 。 即 选择 名 称 为 E 的 
标签 ， 且 该 标签 定义 了 attibute 属性 ，attribute 属性 值 包含 后 级 为 value 的 字符 串 。E 可 以 省 略 ， 
省 略 时 表示 匹配 满足 条 件 的 任意 元 素 。 

例如 ， 设 置 class 属性 值 以 con 结尾 的 所 有 p 元 素 的 字体 为 宋体 。 

p[class$="con"] 

font-family:" 宋 体 " 

} 


说 明 : 只 要 p 元 素 的 class 属性 值 是 以 con 字符 串 结 尾 的 就 会 被 选中 ， 设 置 指定 的 字体 。 
5.1.4 ”Elattribute*=value] 选 择 器 


E[attribute*=value] 选 择 器 匹配 属性 值 包 含 指定 值 value 的 每 个 元 素 。 即 选择 名 称 为 的 标 
签 ， 且 该 标签 定义 了 attribute 属性 ，attribute 属性 值 包含 value 的 字符 串 。E 可 以 省 略 ， 省 略 时 
表示 匹配 满足 条 件 的 任意 元 素 。 

例如 ， 设 置 class 属性 值 包 含 china 的 所 有 上 元 素 的 字体 颜色 为 红色 。 

liclass*="china"] 


和 1o4 
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{ 
color:"red": 


说 明 : 只 要 二 元 素 的 class 属性 值 包含 china 字符 串 就 会 被 选中 ， 设 置 字体 颜色 为 红色 。 


5.1.5 “案例 制作 
【案例 : 百度 新 闻 - 热 点 要 闻 局 部 页 面 】5-1.html 的 代码 如 下 。 


<head> 
<title> 百 度 新 闻 -热点 要 闻 </title> 
<style> 
| 
line-height32px: 
font-family:Arial; 
Color:#222222; 


width:500px: 证 宽度 为 500px*/ 
border-bottom:2px solid #999; ”* 设 置 下 边框 为 2px、 实 线 、 灰 色 */ 
margin-bottom: Spx: 证 设置 下 外 边 距 */ 
} 
必 设 置 class 属性 值 以 "tt" 结尾 的 所 有 元 素 的 样式 %/ 
lifclass$="tt"]{ 
font-weight:600; 
font-size: 18px; 
color: #0091D8; 
} 
人 # 设 置 class 属性 值 以 "1" 结尾 的 所 及 元 素 的 样式 */ 
Hiclass$="1"]{ 
font-size: 16px: 
} 
人 # 设 置 class 属性 值 以 "newsl" 开头 的 所 有 二 元 素 的 样式 */ 
li[class^="news1"] 
{ 
list-style-image: ul(img/news_img1.png):* 设 置 列表 样式 图 片 */ 
} 
店 设 置 class 属性 值 以 "2" 结尾 的 所 有 二 元 素 的 样式 */ 
lilclass$="2"]{ 
list-style-image:url(img/news_img?2.pne): 
font-size: 14px: 
} 
</style> 
</head> 


<body> 
<h3> 热 点 要 闻 </h3> 
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< 
<li dlass="newsl tt"> 习 近 平 这 样 讲述 金 砖 合作 之 道 </li> 
<li class="news1"> 习 近 平 眼 里 的 “第 一 资源 为 何如 此 重要 <i> 
<li class="news1"> 习 近 平 要 求 用 “这 三 激 " 把 全 面 深化 改革 推 向 深入 </li> 
<li class="news1"> 习 近 平 指引 信访 工作 “安民 之 道 ” 习近平 谈 诚信 <Ai> 
<li class="news1"> 商 务 部 回应 美 “301 调查 声明 "中 的 7 大 细节 < 人 i> 
<li class="newsl_tt"> 国 家 卫 健 委 : 密切 关注 人 用 狂犬 病 疫 苗 质量 安全 </fi> 
< class="news2"> 安 置 房 空置 解放 日 报 怒 批 : 谁 副 扶贫 对 象 " 晒 步 数 ”</li> 
<li class="news2"> 国 家 药品 监督 管理 局 : 9 家 企业 9 批 次 化 妆 品 不 合格 </li> 
<li class="news2"> 个 税法 草案 意见 11 万 条 专项 扣除 取 定 额 可 能 性 大 </li> 
<li class="news2"> 民 航 局 出 新 政 ， 叫 停 特价 机 票 不 能 退 改 签 霸王 条 款 </li> 
<li class="newsl_tt"> 工 信 部 : 电信 企业 要 自觉 不 在 校园 摆 摊 设 点 营销 业务 </li> 
<li class="news2"> 连 云 港 附近 海域 存在 未 爆炸 弹 过 往 船 舶 注意 避让 </li> 
<liclass="news2"> 全 国 70 城 6 月 最 新 房价 出 炉 ， 上 涨 城市 高 达 63 个 </li> 
<li class="news2"> 民 航 局 出 新 政 ， 叫 停 特价 机 票 不 能 退 改 签 霸 王 条 款 </li> 
<li class="news2"> 欧 盟 宣布 对 进口 钢铁 产品 实施 临时 保障 措施 </li> 
<ul> 
<lbody> 
【案例 说 明 】(1) 页 面 中 通用 的 样式 在 *{ } 中 设置 。(2) 标题 “热点 要 闻 ” 下 的 横 线 是 通过 设 
置 标题 的 下 边框 实现 的 ， 横 线 及 其 下 方 的 新 闻 列 表 项 之 间 的 距离 通过 定义 margin-bottom:5px; 
样式 调整 。(3) 使 用 CSS3 选择 器 ， 选 择 某 些 元 素 设 置 样式 时 ， 需 要 定义 合适 的 class 或 id 属性 
值 ， 然 后 才能 方便 地 使 用 匹配 字符 串 来 选择 目标 元 素 。 


[1 伪 类 选择 器 


伪 类 选择 器 是 CSS3 中 新 增 的 选择 器 。 常 用 的 伪 类 选择 器 有 :firstchild 选择 器 、:last-child 选 
择 器 、:nth-child(n) 选 择 器 、:nth-last-child(n) 选 择 器 、:nth-oftype(n) 选 择 器 、:nth-last-of-type(n) 选 
择 器 、:empty 选择 器 和 :target 选择 器 。 


5.2.1 ”案例 分 析 


【案例 展示 】 动 态 新 闻 列表 局 部 页 面 的 设置 。 

使 用 CSS 设置 标题 和 列表 项 样式 ， 完 成 动态 新 闻 列表 局 部 页 面 的 设计 。 页 面 文 件 5-2.html 
在 浏览 器 中 的 显示 效果 如 图 5-2 所 示 。 

【知识 要 点 】 字 体 类 型 、 大 小 、 颜 色 、 对 齐 方式 、 行 间距 、 结 构 化 伪 类 选择 器 等 。 

【学 习 目标 】 掌 握 CSS 文本 修饰 的 常用 属性 和 伪 类 选择 器 的 作用 并 灵活 应 用 。 
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公司 新 闻 


PP ADB 智 能 LED 头 灯 系 统 发 展 迅速 , ADB 和 暂 能 LED 头 灯 兴 起 2018-03-30 
> LED 灯 异国 内 业务 市 场 研讨 会 LED 灯 骏 国 内 业务 2017-4-6 2018-03-03 
b> 车 用 、MiniLED 等 新 产品 助力 ， 亿 光荣 他 看 好 营运 服务 工作 - 2018-03-03 
* OLED 有 照明 市 场 的 机 会 与 挑战 -- LEDinside 2018-03-03 
上 江苏 加 快 半导体 照明 产业 发 展 ，2020 年 规模 将 达 1200 亿 2018-03-03 
上 智能 照明 进入 高 速 发 展 ， 工 业 及 商业 为 最 大 应 用 场景 . 2018-03-03 
> 景观 坝 LED 洗 墙 灯 怎么 选 购 ?您 不 能 怎 略 这 些 细节 ! 2018-03-03 
bP LED 点 光源 的 绪 路 板 使 用 什么 材质 的 质量 好 ? 2018-03-03 


bP 四 能 照明 进入 高 带 发 展 ， 工 业 及 商业 为 最 大 右 用 场景 . 2018-03-03 


ga ggnmaogD 
5-2 动态 新 闻 列表 局 部 页 面 


5.2.2 :first-child 和 :last-child 选择 器 


:first-child 选择 器 用 于 选取 属于 其 父 元 素 的 首 个 子 元 素 。 

:last-child 选择 器 用 于 选取 属于 其 父 元 素 的 最 后 一 个 子 元 素 。 

【 例 5-2-1) 百度 新 闻 - 百 家 号 局 部 页 面 的 设计 。 要 求 对 每 组 无 序列 表 的 首 个 列表 项 增 大 字号 
并 加 粗 显 示 ， 除 最 后 一 组 无 序列 表 外 ， 其 他 组 底部 加 点 状 分 割 线 。 本 例 在 浏览 器 中 的 显示 效果 
如 图 5-3 所 示 ， 页 面 文件 5-2-1.html 的 关键 代码 如 下 。 

<head> 

<title> 百 度 新 闻 - 百 家 号 </title> 
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m3{ 
margin:5px; 上 # 外 边 距 为 Spx 为 了 布局 美观 */ 
color#0091DS8: 
} 
uf{ 
border-bottom:1px dotted #555555; ”/* 下 边框 粗细 为 I px， 灰色 点 线 */ 
padding-left:10px: 。 ”人 * 左 内 边 距 为 10px*/ 
Imargin-top:10px: 访 上 外 边 距 为 10px*/ 
} 
ulast-child{ 证 设置 父 元 素 div 中 最 后 一 个 Ud 的 样式 */ 
border-bottom:0px : 入 下 边框 粗细 为 0， 即 不 要 下 边框 3/ 
} 
于 
Jist-stylenone: 
line-height:26px: 
} 
li:first-child{ 让 设置 父 元 素 由 中 首 个 的 样式 */ 
font-size: 15px: 
font-weight:600; 
} 
</style> 
</head> 
<body> 
<div id="content"> 
<h3> 百 家 号 </h3> 
<h> 
<ul class="news1"> 
<li>2018 财富 500 强 出 炉 : 京东 “领先 ”</li> 
<li> 知 识 付费 不 是 " 割 韭菜 "的 生意 <li> 
<li>HTC 在 印度 大 幅 裁员 : 高 管 几乎 走 空 <li> 
<li>Instagram 有 9500 万 机 器 人 账号 </li> 
< 
<ul class="news1"> 
<1i> 苹 果 新 MacBook Pro 键盘 有 玄机 </li> 
<! 记 中 国内 存 闪 存 明 年 国产 三 家 芯片 厂 将 量 产 </li> 
<I 记 微软 财报 解读 : Q4 营 收 301 亿美 元 同比 涨 17%</li> 
<li> 特 斯 拉 为 德国 车 主 4000 欧元 补贴 "买单 ”</li> 
< 
<ul class="news2"> 
<1 记 高 通 因为 芯片 定价 也 被 欧盟 指控 ! <i> 
<I 记 谷歌 遭 欧盟 重 罚 究竟 是 谁 在 破坏 安 卓 生 态 ? </li> 
<li> 迪 士 尼 拿 下 福克斯 后 奈 飞 的 压力 越 来 越 大 </li> 
<1> 被 资本 市 场 ' 阅 后 "的 Snap 会 “ 即 焚 " 吗 </li> 
</ul> 
</div> 


108 


第 5 章 CSS3 选择 器 


【说 明 】Q) 新 闻 各 版 块 之 间 的 分 割 线 是 通过 设置 无 序列 表 的 下 边框 实现 的 。 但 最 后 一 个 版 
块 使 用 :last-child 选择 器 去 掉 了 下 边框 。(2) 使 用 :first-child 和 :last-child 伪 类 选择 器 时 ， 只 有 当 元 
素 是 另 一 个 元 素 的 子 元 素 时 才能 匹配 选择 。 


[- 口 百 必 新 闻 - 否 家 号 x 


GC Ofile/E/Aadle. 六 : 


知 吕 付费 不 是 ' 割 非 荣 的 生意 
HTC 在 印度 大 幅 起 员 ; 高 管 几乎 走 空 
Instagram 有 9500 万 机 器 人 帐号 


苹果 新 MacBook Pro 键 盘 有 玄机 

中 国内 存 内 存 明 年 国产 三 家 芯片 厂 格 星 产 
微软 财报 钥 读 : G4 营 收 301 亿 美元 同比 涨 17% 
特 斯 拉 为 德国 车 主 4000 芍 元 ?NM 买单 


高 通 因 为 芯片 定价 也 被 欧盟 指控 ! 
谷歌 讲 吹 盟 重 罚 究竟 是 淮 在 破坏 安 卓 生态 ? 
被 资本 市 场 ' 阅 后 "的 Snap 会 即 朗 吗 


5.2.3 :nth-child(n) 和 :nth-last-child(n) 选 择 器 


使 用 :first-child 和 :last-child 选择 器 ， 可 以 选择 父 元 素 中 的 第 一 个 或 最 后 一 个 元 素 ， 但 如 果 
想 选择 其 他 位 置 的 元 素 就 不 可 行 了 。 为 此 , CSS3 中 引入 了 :nth-child(m) 和 :nth-last-child(n) 选 择 器 ， 
用 来 选择 父 元 素 的 第 mn 个 或 倒数 第 n 个 子 元 素 。:nth-last-child(1) 和 :last-child 选择 器 实现 的 功能 
相同 。 

例如 ， 设 置 <ul> 中 的 第 3 个 列表 项 以 红色 显示 。 

li: nth-child(3){ 

color:red: 
} 
又 如 ， 选 择 父 元 素 中 的 奇数 位 或 偶数 位 子 元 素来 设置 样式 。 


:nth-child(odd){ }; 。”/*odd 奇数 */ 
:nth-child(even){ }; 。 /*even 偶数 */ 


5.2.4 :nth-of-type(n) 和 :nth-last-of-type(n) 选 择 器 


使 用 :nth-of-type(n) 和 :nth-last-of-type(n) 选 择 器 可 以 选择 父 元 素 中 特定 类 型 的 第 n 个 和 倒数 
第 n 个 子 元 素 ， 而 使 用 :nth-child(n) 和 :nth-last-child(n) 选 择 器 选择 父 元 素 中 的 第 n 个 和 倒数 第 n 
个 子 元 素 时 ， 与 元 素 类 型 无 关 。 

【 例 5-2-2】 四 季 的 划分 。 父 元 素 中 有 多 种 子 元 素 标签 ， 想 要 设置 特定 类 型 的 某 个 子 元 素 样 
式 时 ,可 以 用 :nth-of-type(n) 和 :nth-last-of-type(n) 选 择 器 进行 匹配 。 本 例 在 浏览 器 中 的 显示 效果 如 
图 5-4 所 示 ， 页 面 文件 5-2-2.html 的 关键 代码 如 下 。 
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<head> 
<meta charset utf8> 
<title> 四 季 的 划分 </title> 


*{margin:2px:} 
h2 {text-align:center:} 
h3 {margin:Spx:} 
h3:nth-of-type(2){color:red:} 。 /* 设 置 父 元 素 中 第 2 个 h3 元 素 的 样式 */ 
h3:nth-child(2){color:green:} 。* 设 置 父 元 素 中 第 2 个 元 素 的 样式 ， 第 2 个 元 素 正好 是 h3， 有 效 */ 
pnth-of-type(2){color:blue:} 。”/* 设 置 父 元 素 中 第 2 个 p 元 素 的 样式 */ 
Pinth-child(2){color:darkcyan:} 居 设 置 父 元 素 中 第 2 个 元 素 的 样式 ， 第 2 个 元 素 不 是 p， 无 效 */ 
</style> 
</head> 


<body> 
<h2> 四 季 的 划分 <h2> 
<h3> 春 季 </h3> 
<p> 中 国 农历 春季 是 从 立春 到 立夏 这 一 段 时 间 ， 即 农历 一 、 二 、 三 月 ， 包 括 了 立春 、 雨 水 、 惊 执 、 春 分 、 
清明 、 谷 雨 6 个 节气 。</p> 
<h3> 夏 季 </h3> 
<p> 中 国 农历 夏季 是 从 立夏 至 立秋 这 一 段 时 间 ， 即 农历 四 、 五 、 六 月 ， 包 括 了 立夏 、 小 满 、 芒 种 、 夏 
至 、 小 署 、 大 时 6 个 节气 。</p> 
<h3> 秋 季 </h3> 
<p> 中 国 农历 秋季 是 从 立秋 到 立冬 这 一 段 时 间 ， 即 农历 七 、 八 、 九 月 ， 包 括 立 秋 、 处 署 、 白 露 、 秋 分 、 
寒露 、 霜 降 6 个 节气 。</p> 
<h3> 冬 季 </h3> 
<p> 中 国 农历 冬季 始 于 农历 的 立冬 ， 止 于 次 年 的 立春 ， 即 农历 的 10、11、12 月 ,包括 立冬 、 小雪、 大 雪 、 
冬至 、 小 寒 、 大 寒 6 个 节气 。</p> 
</body> 
【说 明 】h3:nth-of-type(2) 人 选择 父 元 素 中 的 第 2 个 <h3> 标 签 ， 即 “<h3> 夏 季 </h3>”。 
h3:nth-child(2)f} 选 择 父 元 素 中 的 第 2 个 子 元 素 ， 即 “<h3> 春 季 </h3>”。p:nth-child(2){ } 也 是 选 
择 父 元 素 中 的 第 2 个 子 元 素 ， 但 第 2 个 子 元 素 是 <h3> 标 签 ， 所 以 该 设置 无 效 。 
所 以 ， 当 父 元 素 中 有 多 种 标签 时 , 适合 使 用 :nth-of-type(n) 和 :nth-last-of-type(n) 选 择 器 来 选择 
父 元 素 中 特定 类 型 的 第 n 个 和 倒数 第 n 个 子 元 素 。 


D mst > 是 四 


C © 1270018070/ANadled/ha 全 


四 季 的 划分 
春季 
中 国 农历 春季 是 从 立春 到 立夏 这 一 段 时 间 ， 即 农历 一 .二 . 三 
月 , 包括 了 立春 、 雨 水 、 惊 堆 、 春 分 、 清 明 、 谷 雨 6 个 节气 。 
夏季 
中 国 农历 夏 幸 是 从 立夏 至 立秋 的 这 一 段 时 间 ， 即 农历 四 、 五 、 六 
月 , 包括 了 立 囊 、 小 满 、 芒 种 、 艳 至 、 小 号 、 大 号 6 个 节气 。 
秋季 
中 国 农历 秋季 县 从 立秋 到 立冬 这 一 段 时 间 , 即 农历 七 、 八 . 九 
月 ,包括 立秋 、 外 导 、 日 案 、 秋 分 、 塞 雷 、 琵 降 6 个 节气 . 
冬季 
中 国 农历 冬 地 始 于 农历 的 立冬 ， 止 于 次 年 的 立春 ， 即 农历 的 
10、11、12 月 ， 包 括 立冬 、 小 雪 、 大 雪 、 冬 至 、 小 索 、 大 寒 6 
个 节气 


5-4 ”四 季 的 划分 页 面 
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5.2.5 :empty 选择 器 


:empty 选择 器 匹配 没有 子 元 素 或 文本 内 容 为 空 的 每 个 元 素 。 

例如 ， 页 面 上 需要 一 个 彩色 矩形 条 ， 就 可 以 用 该 选择 器 来 实现 。 

【 例 5-2-3】 用 :empty 选择 器 实现 矩形 条 。 本 例 在 浏览 器 中 的 显示 效果 如 图 5-5 所 示 ， 页 面 
文件 5-2-3.html 的 关键 代码 如 下 。 


Pp{height:10px;} 
:empty {background:#999; 
</style> 
</head> 
<body> 
<h2> 唐 诗 诵读 </h2> 
<p><p> 
<h3> 行 路 难 </h3> 
<p>< 户 李白 <i></p> 
<p> 金 覃 清 酒 斗 十 千 ， 玉 盘 珍 乌 直 万 钱 。 <br> 
停 杯 投 等 不 能 食 ， 拔 剑 四 顾 心 茫然 。 
欲 渡 黄河 冰 塞 川 ， 将 登 太行 雪 暗 天 。 
闲 来 垂钓 坐 溪 上 ， 忽 复 乘 舟 梦 日 边 。 
行路 难 ， 行 路 难 ， 多 歧路 ， 今 安 在 。 
长 风 破浪 会 有 时 ， 直 挂 云 帆 济 沧海 。 
<p> 
</body> 


人 


行路 难 
Ezh 


金 模 清 酒 斗 十 干 ， 玉 盘 珍 狄 直 万 钱 。 
停 杯 投 答 不 能 食 ， 披 创 四 顾 心 荡然 。 
欲 渡 黄 河 冰 夺 川 ， 将 登 太 行 写 暗 天 。 
闲 来 垂钓 坐 半 上 ， 忽 折 乘 舟 梦 日 边 。 
行路 难 , 行路 难 ， 多 歧路 ， 今 安 在 。 
长 风 破 浪 会 有 时 ， 直 挂 云 帆 济 汉 海 。 


5-5 :empty 选择 器 的 应 用 
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5.2.6 :target 选择 器 


:target 选择 器 用 于 选取 当前 活动 的 目标 元 素 , 为 页 面 上 的 某 个 target 元 素 (该 元 素 的 id 名 被 
用 作 页 面 中 超 链 接 的 锚 记 名 ) 指 定 样式 。 当 目标 元 素 的 id 和 :target 伪 选 择 器 指定 的 id 相 匹配 时 ， 
它 的 样式 就 会 在 这 个 记 元 素 上 生效 ， 即 只 有 当 用 户 单 击 页 面 上 的 超 链接 ， 并 且 跳 转 到 目标 元 素 
后 ，:target 选择 器 所 设置 的 样式 才 会 起 作用 。 
【 例 5-2-4】 应 用 :target 选择 器 实现 Tab 切换 效果 。 初 始 状态 如 图 5-6 所 示 ， 单 击 季节 名 称 
超 链接 时 ， 对 应 季节 的 内 容 便 显 示 出 来 。 如 单 击 “ 春 季 ” 时 ， 显 示 效 果 如 图 5-7 所 示 。 代 码 如 
下 所 示 。 
<head> 
<meta charset="utf-8"> 
<title>:target 选择 器 应 用 </title> 
<style> 
div{ 
width:300px; 
height:150px: 
background-color-#DBEAEE: 
Imnargin-top:SPX: 


display:none; 。 * 各 个 段落 不 显示 */ 


<body> 

<h2> 四 季 的 划分 </h2> 

<a hre 全 "#spring"> 春 季 </a> | <a hre 仁 "#summer"> 夏 季 </a> | <a hre 仁 "#automn"> 秋 季 </a>| <a hre 仁 
"#winner"> 冬 季 </a> 

<div> 

<p id="spring"> 春 : 中 国 农历 春季 是 从 立春 到 立夏 这 一 段 时 间 ， 即 农历 一 、 二 、 三 月 ， 包 括 了 立春 、 雨 
水 、 惊 热 、 春 分 、 清 明 、 众 雨 6 个 节气 。</p> 

<pid="summer"> 夏 : 中 国 农历 夏季 是 从 立夏 至 立秋 这 一 段 时 间 ， 即 农历 四 、 五 、 六 月 ， 包 括 了 立夏 、 
小 满 、 芒 种 、 夏 至 、 小 暑 、 大 暑 6 个 节气 。</p> 

<pid="automn'"> 秋 : 中 国 农历 秋季 是 从 立秋 到 立冬 这 一 段 时 间 ， 即 农历 七 、 八 、 九 月 ， 包 括 立秋 、 处 暑 、 
和 白露、 秋分、 寒露、 霜降 6 个 节气 。</p> 

<pid="winner"> 冬 ， 中 国 农历 冬季 始 于 农历 的 立冬 ， 止 于 次 年 的 立春 ， 即 农历 的 10、11、12 月 ， 包 括 
立冬 、 小 雪 、 大 雪 、 冬 至 、 小 寒 、 大 寒 6 个 节气 。</p> 

</div> 
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C Ofile//E/Aadled/%.. 安 : 


四 季 的 划分 
EE 二 | 吾 生 | 站 到 和 季 
春 中 国家 万 看 二 从 立 者 到 页 这- 眉 
时 间 ， 即 农历 一 二 、 三 月 ,包括 了 立 
春琴 水 .全副 、 春 分 消 明 、 全 二 5 个 闻 
5-6 初始 效果 图 5-7 单 击 “ 春 季 ” 超 链接 后 的 效果 
5.2.7 “案例 制作 


【案例 : 动态 新 闻 列表 局 部 页 面 】 在 HBuilder 中 制作 该 页 面 的 过 程 如 下 。 

(1) 创建 项 目 ， 把 需要 的 图 片 文件 复制 到 img 文件 夹 中 。 如 果 已 建 项 目 ， 则 把 图 片 素材 复 
制 到 已 建 项 目的 img 文件 夹 中 。 

(2) 创建 网 页 结构 文件 ， 在 当前 项 目 中 新 建 一 个 HTMLS5 网 页 文件 ， 文 件 名 为 5-2.html。 

在 页 面 上 创建 一 个 包含 新 闻 列表 内 容 的 div 容器 , 在 该 容器 中 又 包含 三 个 div, 分 别 用 来 放 
置 标题 、 新 闻 列 表 项 和 分 页 导航 。 


<body> 
<div id="content"> 
<div class="tt"> 
<h3> 公 司 新 闻 </h3> 
</div> 
<div class="news"> 
<up 
<li><img src="img/triangle-icon-blue.jpg">&nbsp:ADB 智能 LED 头 灯 系统 发 展 迅速 ，ADB 智能 
LED 头 灯 兴起 </a> 
<span class="date">2018-03-30</span></li> 
<li><img src="img/triangle-icon-blue.jpg">&nbsp:LED 灯具 国内 业务 市 场 研讨 会 LED 灯具 国内 业 
务 2017-4-6 
<span class="date">2018-03-03</span></li> 
<li><img src="img/triangle-icon-blue.jpg">&nbsp: 车 用 、MiniLED 等 新 产品 助力 ， 亿 光 & 荣 创 看 好 
营运 服务 工作 . 
<span class="date">2018-03-03</span></li> 
<li><img src="img/triangle-icon-blue jpg">&nbsp:OLED 照明 市 场 的 机 会 与 挑战 ~- LEDinside 
<span class="date">2018-03-03</span></li> 
<li><img src="img/triangle-icon-bluejpg">&nbsp: 江 苏 加 快 半导体 照明 产业 发 展 ，2020 年 规模 将 达 
1200 亿 . 
<span class="date">2018-03-03</span></li> 
<li><img src="img/triangle-icon-blue .jpg">&nbsp: 智 能 照明 进入 高 速 发 展 ， 工 业 及 商业 为 最 大 应 用 
场景 
<span class="date">2018-03-03</span></li> 
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<li><img src="img/triangle-icon-bluejpg">&nbsp: 景 观 坝 LED 洗 墙 灯 怎么 选 购 ?您 不 能 忽略 这 些 
细节 ! 

<span class="date">2018-03-03</span></li> 

<li><img src="img/triangle-icon-blue .jpg">&nbsp:LED 点 光源 的 线路 板 使 用 什么 材质 的 质量 好 ? 

<span class="date">2018-03-03</span></li> 

<li><img src="img/triangle-icon-blue.jpg">&nbsp: 智 能 照明 进入 高 速 发 展 ， 工 业 及 商业 为 最 大 应 用 

场景. 
<span class="date">2018-03-03</span></li> 
<P> 
</div> 
<div class="page"> 

<h> 

<uUl> 
<li><a href="">&laquo;</a></li> 
<li><a href="">&#8249;</a></li> 
<li><a href=">1</a></l> 
<li><a href="">2</a></l> 
<li><a href="">3</a></l> 
<li><a href="">4</a></l> 
<li><a href="">5</a></li> 
<li><a href="">6</a></l> 
<li><a href="">&#8250:</a></li> 
<li><a hre=">&raquo;</a></l> 

< 


(3) 设置 新 闻 列 表 局 部 页 面 的 通用 样式 和 外 层 div 容器 的 样式 。 新 闻 列表 局 部 页 面 div 容器 
的 样式 用 #content 定义 ， 宽 度 为 800px。 所 有 的 无 序列 表 不 显示 默认 的 列表 项 目 符号 。 
SL 
padding:0: 
margin:0; 
} 
body{ 
font-family:" 微 软 雅 黑 "。 “/* 字 体 为 "微软 雅 黑 "*/ 
font-size:13px: 人 # 文 字 大 小 为 12px*/ 
color:#333; 证 文字 颜色 为 灰色 */ 
} 
#content{ 
Width:800px: 
height:auto: 
} 
ulf{ 
list-style:none: 证 去掉 默 认 样 式 */ 
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() 标题 部 分 的 样式 设置 。 设 置 tt 和 h3 样式 的 下 边框 线 ， 实 现 水 平 线 效果 ， 线 的 长 度 用 


width( 元 素 长 度 ) 控 制 ， 通 过 设置 h3 的 下 内 边 距 实现 两 条 线 重合 。 


tt{ 
height:40px: 
width:785px: 
margin-left:15px ; 片 左 外 边 距 为 15px*/ 
border-bottom:2px solid #D6D6D6: /* 下 边框 样式 ， 用 下 边框 实现 水 平 线 效果 */ 
} 


H3{ 
font-weight:500; 
font-size:16px ; 
width:90px; 片 标题 空间 长 度 为 90px*/ 
border-bottom:2px solid #0091D8: 。 作 下 边框 样式 ， 实 现 标题 下 面 的 横 线 效果 */ 
padding: 10px 0 10px Spx: 人 # 内 边 距 上 、 右 、 下 、 左 分 别 是 10px、0、10px、5px*/ 
} 


(5) 新 闻 列 表 的 样式 。 定 义 每 个 列表 项 及 新 闻 日 期 的 样式 ， 用 列表 项 的 下 边框 线 实现 水 平 


线 ， 用 linth-lastchild(D) 人 样式 去 掉 最 后 一 个 列表 框 的 下 边框 线 。 


.DewWS{ 

width:780px: 

height:auto; 

margin:20px Opx 20px 20px; 
} 
newsulli{ 

width:780px: 

height:30px: 

float:left: 

margin:Spx: 

border-bottom:1px dotted #999999 :人 # 下 边框 为 1px 的 浅 灰 色 点 线 */ 
} 


Tews ul li:nth-last-child(1){ 让 定义 最 后 一 个 列表 项 的 样式 */ 
border-bottom:Opx: 证 无 下 边框 */ 
} 
Tews ulli .date{ 让 新 闻 日 期 的 样式 */ 
float:right: 
margin-right:10px: 


} 
(6) 定义 分 页 导航 的 样式 。 分 页 导航 用 无 序列 表 实 现 ， 当 前 页 的 页 号 加 背景 ， 用 


linth-child) 他 实现 。 


.page{ 
clearboth: 
text-align:center: 
padding:1Spx 0 : 

出 
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.pageul{ 
margin-top:10px: 片上 外 边 距 为 10px*/ 
} 
Page li{ 
display:inline: # 在 一 行 上 显示 六 
} 
Page af 
display:inline-block: 廊 行 内 块 级 元 素 */ 
width:20px: 
height20px: 
border:1px solid #0091D8:”/* 定 义 边框 */ 
font-size: 14px; 
text-align:center: 
line-height:20px: 
font-family:" 宋 体 "; 
text-decoration:none; 
} 
page linth-child(3) af 记分 页 导航 中 的 第 三 个 列表 项 加 背景 */ 
background-color:#0091D8; 
} 
-page a:hover{ 人 # 设 置 鼠标 悬 停 时 的 背景 色 六 
background-color: #DDD: 
} 


(7) 预览 网 页 ， 效 果 如 图 5-2 所 示 。 


伪 元 素 选 择 器 
CSS 中 常用 的 伪 元 素 选择 器 有 :before 选择 器 和 :after 选择 器 。 


5.3.1 ”案例 分 析 


【案例 展示 】 超 链接 按钮 的 设计 。 
使 用 CSS 设置 超 链接 样式 的 基本 知识 ， 制 作 网 站 上 的 超 链 接 按 钮 。 本 例文 件 5-3.html 在 浏 


览 器 中 的 显示 效果 如 图 5-8 所 示 。 
图 5-8” 超 链接 按钮 


【知识 要 点 】 设 置 文本 样式 、 伪 元 素 选择 器 的 用 法 。 
【学 习 目标 】 掌 握 使 用 CSS 设置 文本 样式 的 方法 和 伪 元 素 选择 器 的 用 法 。 


5.3.2 :before 选择 器 
:before 选择 器 用 于 在 被 选 元 素 的 内 容 之 前 插入 内 容 。 
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格式 : 


E:before{ 
content: "文字 "url0: 
} 


content 属性 用 于 指定 要 插入 的 内 容 ， 可 以 是 用 双 引 号 括 起 来 的 文本 或 用 url0 指 定 路 径 的 
图 片 。 

【 例 5-3-1] 基 于 5.2.1 节 的 案例 展示 “动态 新 闻 列 表 局 部 页 面 的 设置 ”修改 页 面 文件 5-2.html 
中 的 内 容 ， 将 每 个 列表 项 之 前 插入 的 图 片 ,用 CSS 的 :before 选择 器 来 实现 。 将 动态 新 闻 列 表 项 
的 代码 修改 成 如 下 所 示 。 

<li><ahre 全 ">LED 灯具 国内 业务 市 场 研讨 会 LED 灯具 国内 业务 2017-4-6</a> 

<span class="date">2018-03-03</span></li> 

实现 在 动态 新 闻 列 表 项 前 插入 三 角形 图 片 的 CSS 样式 代码 如 下 。 

news ul li:before{ 

content: url(img/triangle-icon-blue.jpg); * 在 列表 项 内 容 前 插入 图 片 */ 
margin-right:Spx : 

} 

【说 明 】 用 CSS 的 :before 选择 器 在 动态 新 闻 列 表 项 之 前 插入 图 片 ， 不 但 简化 了 页 面 代码 ， 
而 且 便 于 统一 设置 样式 。 


5.3.3 :after 选择 器 


:after 选择 器 实现 在 被 选 元 素 的 内 容 之 后 插入 内 容 。 

格式 : 

E: after{ 

content; "文字 "url0: 

} 

content 属性 的 用 法 同 :before 选择 器 中 的 content 属性 。 

【 例 5-3-2】 用 :after 实现 在 新 闻 标题 之 后 插入 日 期 。 本 例 在 浏览 器 中 的 显示 效果 如 图 5-9 所 
示 ， 页 面 文 件 5-3-2.html 的 关键 代码 如 下 。 


<head> 

<meta charset="utf-8"> 

<title>:after 示例 </title> 

<style> 
body {background-color: #D6D6D6:} 
Pp:after{ 
content:"(2018-07-24)": 
font-size: 13px: 
color:red: 
font-style:italic: 
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</style> 
</head> 
<body> 


<p>NEWS: 习 近 平 同 卢旺达 总 统 卡 加 梅 举行 会 谈 </p> 


<Jbody> 


NEWS: 习 近 平 同 卢旺达 总 统 卡 加 梅 举行 会 谈 (2018-07-24) 
图 5-9 :after 示 例 


5.3.4 “案例 制作 


【案例 : 超 链 接 按钮 设计 】 在 HBuilder 中 制作 该 页 面 的 过 程 如 下 。 
(1) 创建 项 目 ， 把 需要 的 图 片 文件 复制 到 img 文件 夹 中 。 如 果 已 建 项 目 ， 则 把 图 片 素材 复 


制 到 已 建 项 目的 img 文件 夹 中 。 


(2) 创建 网 页 结构 文件 ， 在 当前 项 目 中 新 建 一 个 HTMLS5 网 页 文件 ， 文 件 名 为 5-3.html， 代 


码 如 下 。 
<head> 

<meta charset="utf-8"> 

<title> 超 链接 按钮 设计 </title> 

<style> 

af /# 超 链接 的 样式 %/ 
display:block:; 

width:75px: 
height:26px: 
background-color:#494949: 
font-size:13pX: 
color#FFF ; 
text-decoration:none; 
text-align:center: 
margin-top:15px: 
line-height:26px : 


a:after{ 
content:url(img/triangle-icon-white.png): 
padding-left:Spx: 


<a hre 伍 "#'> 详 细 信 息 </a> 
</body> 
(3) 预览 网 页 ， 显 示 效 果 如 图 5-8 所 示 。 
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多】 链接 伪 类 


前 面 第 2 章 中 已 经 介绍 了 超 链 接 的 基本 用 法 。 在 定义 超 链接 时 ， 为 了 提高 用 户 体验 ， 经 常 
需要 为 超 链接 设置 不 同 的 状态 ， 使 得 超 链接 在 被 单 击 前 、 单 击 后 和 鼠标 悬 停 时 的 样式 不 同 。 在 
CSS 中 ， 可 通过 链接 伪 类 来 设置 超 链接 的 不 同 状态 。 

超 链 接 a 的 伪 类 有 四 种 ， 分 别 是 :iink、:visited、:hover 和 :active， 而 且 需 要 按照 这 个 顺序 设 
置 ， 否 则 定义 的 样式 可 能 不 起 作用 。 链 接 伪 类 的 具体 用 法 如 下 。 

e alink{CSS 样式 }: 设置 未 访问 时 超 链 接 的 状态 。 

e ”a:visited{CSS 样式 }: 设置 访问 后 超 链接 的 状态 。 

e@ a:hover{CSS 样式 }: 设置 鼠标 经 过 、 悬 停 时 超 链接 的 状态 。 

e@ aactive{fCSS 样式 }: 设置 鼠标 单 击 不 动 时 超 链 接 的 状态 。 


5.4.1 案例 分 析 


【案例 展示 】 网 页 底部 导航 的 设计 。 

使 用 CSS 文本 样式 和 链接 伪 类 的 基本 知识 ， 制 作 网 页 底部 的 导航 部 分 。 本 例文 件 5-4.html 
运行 后 ， 链 接 导航 单 击 前 和 单 击 后 的 效果 如 图 5-10 所 示 ， 鼠 标 经 过 和 悬 停 时 的 效果 如 图 5-11 
所 示人 为 超 链接 加 下 画 线 、 文 本 颜色 变 为 浅 灰 色 )。 


网 站 首页 “| 产品 中 心 | ”联系 方式 ”| 新闻 动态 


图 5-10 导航 效果 


网 站 首页 产品 和 联系 方式 ”| ”新 闻 动态 


图 5-11 ”鼠标 经 过 和 悬 停 时 的 效果 


【知识 要 点 】 文 本 样式 定义 、 链 接 伪 类 的 应 用 。 
【学 习 目标 】 掌 握 链 接 伪 类 的 功能 和 用 法 。 


5.4.2 ”案例 制作 


【案例 : 网 页 底部 导航 的 设计 】5-4.html 的 文档 代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title> 链 接 伪 类 应 用 </title> 
<style> 
-link{ 
text-align:center: 证 相对 于 页 面 居中 */ 
font-size: 16px: 
color #fFf: 
backeround-color:#545861:; 
height:40px: 
Padding-top:14px: 
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Jink a:link.a:visited{ 
display:inline-block: 庆 内 联 元 素 所 
width:70px: 
color #TPPPE 
padding:0px 8px 0px 8px: /* 上 、 右 、 下 、 左 的 内 边 距 依次 为 Opx、8px、0px、8px*/ 
margin:0 14px 0 14px: 上 上 、 右 、 下 、 左 的 外 边 距 依次 为 Opx、14px、0px、14px*/ 
text-decorationnone: 片 链接 无 修饰 */ 


text-align:center: /文字 居中 对 齐 ， 范 围 为 70px*/ 

} 

‘link ahovera:active { 上 # 鼠 标 悬 停 链接 的 样式 %/ 
color#CCC: 刻 浅 灰色 文字 */ 
text-decoration:underline; ”/* 下 画 线 修饰 */ 

} 

</style> 
</head> 
<body> 
<p class="link"> 
<a hre 伍 "#'> 网 站 首页 </a>|<a hre 仁 "#" > 产品 中 心 </a>|<a hre 仁 "# 人 > 联系 方式 </a>|<a hre 仁 "#"> 新 闻 动 
态 </a> 
<p> 
<body> 


浏览 页 面 ， 显 示 效 果 如 图 5-10 和 图 5-11 所 示 。 

【案例 说 明 】(1) 在 实际 工作 中 ， 通 常 只 使 用 a:link、a:visited 和 ahover 来 定义 访问 前 、 访 
问 后 和 鼠标 悬 停 时 的 链接 样式 。(2) 除了 文本 样式 外 ， 链 接 伪 类 还 可 以 用 来 控制 超 链接 的 背景 、 
透明 度 和 边框 等 的 样式 。 


实 训 


【 实 训 任务 】 用 CSS 样式 及 属性 选择 器 的 知识 设计 客户 案例 展示 局 部 页 面 。 本 例文 件 
5-5.html 在 Chrome 浏览 器 中 首次 加 载 时 的 显示 效果 如 图 5-12 所 示 ， 单 击 任意 一 张 小 图 ， 会 在 
下 边 显示 该 图 对 应 的 大 图 ， 效 果 如 图 5-13 所 示 。 


[i x 
© © file///E/AladLed/chapter05/5-5.html |)! | 
客户 案例 -案例 展示 


灯光 表现 力 的 主要 效用 : 
育 加 工 宝 间 艺 术 
六 物体 造型 泪 梁 
衣 三 富 字 间 内 容 : 衣 | 
六 装 肇 宁 间 艺术 


图 5-12 首次 加 载 时 的 客户 案例 展示 页 面 
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口 产 疡 室 全民 示 


拟 GC © file///E/AladLed/chapter05/5-5.html#tp1 女 | 有 
客户 案例 -过 例 展示 


灯光 表现 力 的 主要 效用 : 
家 加 工 空间 艺术 : 利用 灯光 的 


突 丰 富 字 间 内 容 : 通过 明暗 对 | 
衣装 隆 空 间 艺 术 : 通过 杂 妓 自 ! 


图 5-13 单 击 小 图 时 的 客户 案例 展示 页 面 
【知识 要 点 】 无 序列 表 、 伪 类 选择 器 、 伪 元 素 选择 器 、 链 接 伪 类 和 CSS 样式 。 
【 实 训 目 标 】 掌 握 用 CSS 样式 和 属性 选择 器 控制 页 面 文本 和 图 像 显 示 效 果 的 方法 。 
5.5.1 任务 分 析 


1. 页 面 结构 分 析 


本 例 中 的 客户 案例 展示 页 面 是 网 站 三 级 页 面 主体 内 容 的 右 侧 局 部 页 面部 分 ， 盒 子 中 有 标题 
和 展示 内 容 。 展 示 内 容 又 分 成 三 部 分 ， 分 别 是 包含 四 个 列表 项 的 无 序列 表 、 一 排 超 链接 小 图 和 
作为 链接 目标 的 大 图 。 

2. CSS 样式 分 析 

网 站 三 级 页 面 主体 内 容 的 右 侧 局 部 页 面 放 在 一 个 宽度 为 800px、 高 度 自动 的 div 盒子 中 。 
标题 用 <h3> 定 义 ， 标 题 下 方 的 横 线 由 标题 所 在 div 盒子 的 下 边框 和 标题 的 下 边框 组 成 。 

展示 内 容 的 四 行文 本 是 无 序列 表 的 四 个 列表 项 ， 每 个 列表 项 前 用 :before 伪 元 素 选择 器 插入 
小 图 像 。 

一 行 小 图 是 超 链 接 ， 大 图 初始 状态 下 不 显示 ， 设 置 成 display:none。 当 单 击 小 图 时 ， 显 示 对 
应 的 大 图 ， 该 功能 通过 :target 实现 ， 此 时 设置 大 图 为 display:block。 


5.5.2 ”任务 完成 
根据 上 面 的 分 析 ， 创 建 网 页 文件 和 外 部 样式 文件 ， 完 成 客户 案例 展示 页 面 的 设计 。 
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1. 创建 页 面 文件 


(1) 启动 HBuilder， 在 当前 项 目 中 新 建 一 个 HTML5 文档 ， 文 件 名 为 5-5.html。 
(2) 在 HBuilder 编辑 区 编辑 文件 ， 页 面 文件 结构 代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title> 客 户 案例 展示 </title> 
<link href="css/$-5.css" rel="stylesheet" type="text/css"/> 
</head> 
<body> 
<div id="content-right"> 
<div class="tt"> 
<h3> 客 户 案例 -案例 展示 </h3> 
<div> 
<div class="works show"> 
<h4> 灯 光 表现 力 的 主要 效用 :</h4> 
<u> 
<li><b> 加 工 空间 艺术 <b>: 利用 灯光 的 表现 力 对 环境 空间 进行 艺术 加 工 满足 了 人 们 视觉 上 的 
心理 要 求 ， 得 到 美的 享受 和 心理 平衡 。</li> 
<li><b> 物 体 造型 演 染 </b>: 利用 灯光 对 广场 建筑 和 物体 造型 的 泻 染 ， 以 及 利用 灯光 做 出 的 图 
画 等 ， 发 挥 丰富 的 艺术 效果 。</li> 
<li><b> 丰 富 空 间 内 容 <b>: 通过 明暗 对 比 ， 在 一 片 环境 亮度 较 低 的 背景 中 突出 明 视 效应 ， 增 
加 空间 层次 ， 吸 引 人 们 的 视觉 注意 力 。<i> 
<li><b> 装 饰 空间 艺术 </b>: 通过 灯具 自身 的 造型 、 质 感 以 及 灯具 的 排列 组 合 ， 对 空间 起 着 点 
缀 或 强化 艺术 效果 的 作用 。</li> 
</ul> 
<div> 
<a href="#tp1"><img src="img/works 1.jpg" class="tp-small"></a> 
<a href="#tp2"><img stre="img/works 2.jpg" class="tp-small"></a> 
<a href="#tp3"><img ste="img/works_3.jpg" class="tp-small"></a> 
<a href="#tp4"><img src="img/works 4jpg" class="tp-small"></a> 
<a href="#tp5"><img src="img/works 5jpg" class="tp-small"></a> 
<a href="#tp6"><img strc="img/works_6.jpg" class="tp-small"></a> 
</div> 
<div> 
Pid="tp1"> <img src="img/works 1.jpg" class="tp-big"> </p> 
<p id="tp2"> <img src="img/works 2.jpg" class="tp-big"> </p> 
<p id=-"tp3"> <img src="img/works 3.jpg" class="tp-big"> </p> 
<pid="tp4"> <img src="img/works 4.jpe" class="tp-bie"> </p> 
pid="tp5"> <img ste="img/works 5jjpeg" class="tp-big"> </p> 
pid-"tp6"> <img ste="img/works 6jpg" class="tp-big"> </p> 
</div> 
</div> 
</div> 
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2. 创建 CSS 样式 文件 


创建 外 部 样式 文件 ， 在 当前 项 目的 css 文件 夹 中 新 建 一 个 CSS 文件 ， 文 件 名 为 5-5.css， 样 
式 代 码 如 下 。 
(1) 页 面 的 统一 样式 。 


a 
Padding:0; 
margin:0; 
} 
body{ 
font-family: "微软 雅 黑 " /* 字 体 为 "微软 雅 黑 "*/ 
font-size:13px; 让 文字 大 小 为 12px*/ 
color:#333; 上 文字 颜色 为 灰色 */ 
(2) 客户 案例 展示 局 部 页 面 上 外 层 盒子 的 样式 。 
#content-right{ 
width:800px: 
height:auto; 
} 
(3) 标题 的 样式 ， 标 题 盒子 的 样式 tt， 标题 样式 h3。 
#content-right tt{ 
height:40px: 
width:785px; 
margin-left:15px ; 证 左 外 边 距 为 15px*/ 
border-bottom:2px solid#D6D6D6; 。 ”/* 下 边框 样式 ， 用 下 边框 实现 水 平 线 效果 */ 
让 
#content-right h3{ 
font-weight:500; 
font-size: 16px ; 
border-bottom:2px solid #0091D8; ”人 * 下 边框 样式 ， 实 现 标题 下 面 的 横 线 效果 */ 
width:140px: 片 标题 空间 长 度 为 140px*/ 
padding:10px 0 9px Spx: 证 内 边 距 上 、 右 、 下 、 左 分 别 是 10px、0、9px、5px*/ 


} 
(4) 展示 内 容 的 盒子 样式 和 标题 样式 。 


.works_show{ 
width:780px: 
height:auto: 
margin:20px Opx 20px 20px: 
text-align:center: 

有 

-Works show h4{ 
font-size:14px: 
font-weight:600 : 
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Iargin:SpX Opx Opx 15px: 
text-alien:left: 
(5) 无 序列 表 的 样式 ， 在 列表 项 之 前 插入 小 图 片 。 
‘works_show ul{ 
list-style:none; 
padding:2px 15px 10px 15px ; 
text-align:left: 
} 
works_show ulli{ 
Padding:Spx Opx Opx 1px ; 


.works_show ul li:before{ 
content-url(../img/star_red.gif); /* 在 列表 项 内 容 前 插入 图 片 */ 
margin-right: 1px; 
(6) 小 图 的 样式 。 
-Wotks show .tp-small{ ” * 设 置 小 图 的 样式 */ 
width:111px: 
height:70px: 
(7) 大 图 的 样式 ， 初 始 不 显示 。 
-Works show pf 
display:none; 让 大 图 所 在 段 不 显示 ， 即 大 图 不 显示 */ 
} 
.works_show .tp-big{ 。””/* 设 置 大 图 的 样式 */ 
width:460px: 
height:270px: 
} 
(8) 设置 选取 当前 活动 的 目标 元 素 ， 单 击 小 图 时 显示 对 应 的 大 图 。 


.works_show :target{display:block:}/* 链 接 到 的 内 容 显示 */ 


3. 浏览 网 页 


在 Chrome 浏览 器 中 浏览 该 网 页 ， 显 示 效 果 如 图 5-12 和 图 5-13 所 示 。 
【说 明 】 若 页 面 上 的 一 行 小 图 用 JavaScript 语言 设置 自 右 向 左 移动 ， 效 果 会 更 好 。 实 现 小 图 
移动 的 关键 代码 如 下 所 示 ， 其 他 代码 不 变 ， 完 整 代码 请 参考 5-5-1 html。 
<div> 
<marquee onmouseover="this.stopO" onmouseout= "this.startO"> 
<a href="#tp1"><img strc="img/works 1.jpg" class="tp-small"></a> 
<a href="#tp2"><img stre="img/works 2.jpg" class="tp-small"></a> 
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<a href="#tp3"><img src="img/works 3.jpg" class="tp-small"></a> 
<a href="#tp4"><img src="img/works 4.jpg" class="tp-small"></a> 
<a href-="#tp5"><img sre="img/works 5.jpg" class="tp-small"></a> 
<a href="#tp6"><img strc="img/works 6.jpg" class="tp-small"></a> 
<marquee> 
<div> 


本 章 小 结 
本 章 介绍 了 常用 的 CSS3 选择 器 ， 包 括 新 增 的 3 种 属性 选择 器 、 伪 类 选择 器 、 伪 元 素 选 择 


器 和 链接 伪 类 等 各 种 选择 器 的 功能 和 用 法 ， 并 结合 实例 介绍 了 应 用 各 种 选择 器 对 页 面 元 素 进行 
样式 定义 的 方法 。 


练习 题 


1. 用 属性 选择 器 对 不 同 标题 设置 不 同样 式 ， 如 图 5-14 所 示 。 


GC |@ 127.0.0.1:8020/AladLed_excise/chapter05/xt5-1.html?_hbt=1537359903470 


HTML5 特 性 


1、 语 义 特性 
HTML5 赋 予 网 页 更 好 的 意义 和 结构 。 更 加 丰富 的 标签 、 微 数据 与 微 格式 等 方面 的 支持 ， 构 建 对 程序 、 对 用 户 都 更 有 价 
信 的 数据 驱动 的 Web。 


2、 本 地 存储 特性 
基于 HTML5 开 发 的 网 页 APP 拥 有 更 短 的 启动 时 间 ,更 快 的 联网 速度 ， 这 些 全 得 益 于 HTML5 APP Cache ,以 及 本 地 存储 
功能 。 


3、 设 备 兼 容 特性 
HTML5 提 供 了 前 所 未 有 的 数据 与 应 用 接 入 开放 接口 。 使 外 部 应 用 可 以 直接 与 浏览 器 内 部 的 数据 直接 相连 ， 例 如 视频 影 
音 可 直接 与 microphones 及 摄像 头 相 联 。 


4、 连 接 特 性 
HTML5 拥 有 更 有 效 的 服务 器 推送 技术 ，Server-Sent Event 和 WebSockets 就 是 其 中 的 两 个 特性 ， 这 两 个 特性 能 够 帮助 
我 们 实现 服务 器 将 数据 “推送 ”到 客户 端的 功能 。 


5、 网 页 多 媒体 特性 
支持 网 页 端的 Audio、Videc 等 多 媒体 功能 ， 与 网 站 自 带 的 APPS， 概 像 头 ， 影 音 功能 相得益彰 。 


6、 三 维 、 图 形 及 特效 特性 


图 5-14 练习 题 1 效果 图 
2. 设计 如 图 5-15 所 示 的 表格 ， 奇 数 行 加 背景 色 #EEEEEE， 第 一 行 加 背景 色 #AAAAAA。 
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11 12 13 14 15 
21 22 23 24 25 
B1 32 33 34 35 
1 4 四 a5 
51 52 53 54 55 
61 le2 63 64 65 


图 5-15 练习 题 2 效果 图 


3. 在 每 个 列表 项 之 前 插入 图 片 ， 显 示 效 果 如 图 5-16 所 示 。 
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WO sam x 呈 
C [© 127.00.1:8020/AladLed_excise/chapter..、 伍 


新 闻 资 讯 

9 英 媒 : “一 带 一 路 ”不 是 中 国 版 马 歌 尔 计划 

日 中 央 点 名 挂牌 18 个 电信 诈骗 重点 地 区 ，5 个 已 摘牌 

日 “ 砍 树 劳模 ”用 断 20 把 摧 头 把 当年 砍 倒 的 树 全 栽 回来 
日 “含金量 ”再 升级 中 日 互 免 签证 协定 10 日 起 生效 


图 5-16 练习 题 3 效果 图 


第 6 章 


盒子 模型 是 网 页 布局 的 基础 ， 具 有 各 种 属性 及 其 设置 方法 ， 只 有 掌握 了 盒子 模型 的 特征 和 
规律 ， 才 能 更 好 地 控制 网 页 中 各 个 元 素 的 显示 效果 。 本 章 将 具体 介绍 盒子 的 各 种 外 观 属性 、 背 
景 属性 及 其 设置 方法 。 


本 章 的 学 习 目 标 : 

理解 盒子 模型 的 概念 。 

掌握 盒子 模型 宽度 和 高 度 属性 的 意义 及 其 设置 方法 。 
掌握 盒子 模型 边框 属性 的 意义 及 其 设置 方法 。 
掌握 盒子 模型 边 距 属性 的 意义 及 其 设置 方法 。 

掌握 盒子 模型 背景 颜色 和 背景 图 像 的 设置 方法 。 
掌握 CSS3 渐变 背景 的 设置 方法 。 

掌握 综合 应 用 盒子 属性 制作 页 面 的 方法 。 


盒子 模型 简介 


盒子 模型 是 CSS 中 的 一 个 重要 概念 ,文档 中 的 每 个 元 素 都 被 描绘 为 矩形 盒子 。 一 个 盒子 包 


6-1 盒子 模型 


1. content( 实 际 内 容 ) 
盒子 的 content 部 分 显示 文本 和 图 像 。 


HTML5+CSS3 网 页 设计 基础 


如 果 指定 高 度 大 于 显示 内 容 所 需 的 高 度 ， 多 余 的 高 度 会 产生 类 似 内 边 距 一 样 的 效果 ; 如 果 
元 素 内 容 的 高 度 大 于 元 素 框 的 高 度 ， 浏 览 器 的 具体 行为 则 取决 于 overflow 属性 。 

2. padding( 内 边 距 ) 

盒子 的 内 边 距 是 内 容 与 边框 之 间 的 区 域 ， 内 边 距 是 透明 的 ， 取 值 不 能 为 负 ， 受 盒子 的 
background 属性 的 影响 。 

3. border( 边 框 ) 


盒子 的 边框 是 围绕 元 素 内 容 和 内 边 距 的 一 条 或 多 条 线 。 边 框 由 粗细 、 样 式 和 颜色 三 部 分 
组 成 。 


4. margin( 外 边 距 ) 


盒子 的 外 边 距 是 指 元 素 外 额外 的 空白 ， 通 常 是 指 不 能 放置 其 他 元 素 的 区 域 ， 而 且 在 这 个 区 
域 中 可 以 看 到 父 元 素 的 背景 (padding 所 带 的 是 本 身 的 背景 而 非 父 元 素 的 背景 )。margin 经 常 取 负 
值 ， 以 实现 定位 功能 。 


盒子 的 外 观 属性 


6.2.1 案例 分 析 


【案例 展示 】 首 页 -企业 新 闻 局 部 页 面 。 
使 用 盒子 模型 的 基本 知识 设计 网 站 首页 -企业 新 闻 局 部 页 面 ,本 例文 件 6-2.html 在 浏览 器 中 
的 显示 效果 如 图 6-2 所 示 。 


yD 首页 -企业 新 闻 
© | © 127.0.0.1:8020/AladLed/chapter06. 


企业 新 闻 


上 因应 智 慧 汽车 概念 ，ADB 知 能 LED 头 灯 系 统 发 展 迅 还，A..… 
2018-03-30 


上 LED 灯具 国内 业务 市 场 研讨 会 LED 灯 具 国 内 业务 2017-4-6 


2018-03-0: 


b> 车 用 、MiniLED 等 新 产品 助力 ， 亿 光 & 茶 亨 看 好 营运 服 
2018-03-0 


上 OLED 照明 市 场 的 机 会 与 批 战 -- LEDinside 
2018-03-0 


上 江苏 加 快 半导体 限 明 产业 发 展 ，2020 年 规模 档 达 1200 亿 . 
2018-03-0: 


智能 照明 进入 高 速 发 展 ， 工 业 及 商业 为 最 大 应 用 场景 
2018-03-0 


6-2 首页 -企业 新 闻 局 部 页 面 
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【知识 要 点 】 盒 子 模型 的 宽度 、 高 度 、 内 边 距 、 边 框 和 外 边 距 。 
【学 习 目标 】 掌 握 盒子 属性 的 设置 方法 。 


6.2.2 ”盒子 模型 的 宽 和 高 


网 页 是 由 多 个 盒子 排列 而 成 的 ， 每 个 盒子 都 有 固定 的 大 小 ， 在 CSS 中 使 用 宽度 属性 width 
和 高 度 属 性 height 对 盒子 的 大 小 进行 控制 。 
语法 : width : auto | length | % 
height : auto | length | % 
参数 如 下 。 
e@ auto: 浏览 器 计算 实际 的 宽度 (高 度 )。 
e length: 自 定 义 元 素 的 宽度 (高 度 )， 常 用 的 取 值 单位 为 像素 (px)。 
e %:; 定义 基于 父 元 素 宽度 (高 度 ) 的 百分比 宽度 (高 度 )。 
【 例 6-2-1】 盒子 模型 的 宽度 和 高 度 ， 本 例 在 浏览 器 中 的 浏览 效果 如 图 6-3 所 示 ， 页 面 文件 
6-2-1.html 的 关键 代码 如 下 。 
<head> 
<meta charset="utf-8"> 
<title> 盒 子 模型 的 宽度 和 高 度 </title> 
<style> 
.boxl{ 
Width:200px: 启 宽 度 200px*/ 
height:100px: 上 # 高 度 100px*/ 
padding: 10px: 店内 边 距 10px*/ 
margin:20px: 让 外 边 距 20px*/ 
border:3px solid #333:; 让 边框 为 3px 的 浅 黑 色 实 线 */ 
} 
</style> 
</head> 


<body> 
<div class="box1"> 自然 界 没有 风 风 雨 雨 ， 大 地 就 不 会 春华秋实 。</div> 
<Jbody> 


1. 两 种 盒子 模型 


盒子 的 实际 宽度 和 高 度 与 盒子 采用 的 模型 有 关 。 

e@ 在 W3C 模型 中 ，width/height=content 

盒子 的 实际 宽度 /高 度 = content + border+ padding 

e@ 在 正 模型 中 ，width/height=content+padding+border 

盒子 的 实际 宽度 /高 度 = width 

盒子 所 占 的 空间 = 盒子 的 实际 宽度 /高 度 +margin 

在 图 6-1 所 示 的 盒子 模型 中 ， 默 认 采用 W3C 模型 ， 如 图 6-4 所 示 。 
实际 宽度 =200+10*2+3*2=226px 
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实际 高 度 =100+10*2+3*2=126px 
所 占 空间 宽度 =226+20*2=266px 
所 占 空间 高 度 =126+20*2=166px 


fe 


CGC Oile///E/Aladled/c.. 安 : 


自然 界 没有 风 风 雨 南 ， 大 地 


会 春 


RS 
SSSSSSSS 
Margin: 20px 
EE 3px 
Padding: 10px 


图 6-3 盒子 模型 的 宽度 和 高 度 6-4 例 6-2-1 的 盒子 模型 
2. box-sizing 属性 


盒子 采用 何 种 模型 ， 可 以 用 box-sizing 属性 来 设置 。 
1) 设置 标准 的 盒子 模型 (默认 值 ) 


box-sizing:content-box: 


标准 的 盒子 模型 的 width 和 height 只 包括 内 容 (content) 的 宽度 和 高 度 , 不 包括 border、padding 


和 margin， 这 些 都 在 盒子 的 外 部 。 
盒子 所 占 空间 宽度 =width+ 左 右 内 边 距 之 和 + 左右 边框 宽度 之 和 + 左右 外 边 距 之 和 
盒子 所 占 空间 高 度 =height+ 左 右 内 边 距 之 和 + 左右 边框 宽度 之 和 + 左右 外 边 距 之 和 
2) 设置 正 模型 
box-sizing:border-box: 


在 这 种 模型 下 设置 盒子 的 宽度 和 高 度 时 , 包括 contenttpadding+border, 但 是 不 包括 margin。 


3. 应 用 范围 


盒子 的 宽度 和 高 度 适用 于 块 级 (locl) 元 素 和 行 级 (inline-blocl) 元 素 ， 对 于 行内 元 素 无 效 。 
【 例 6-2-2】 块 级 元 素 与 行 级 元 素 在 宽度 和 高 度 上 的 区 别 ， 本 例 在 浏览 器 中 的 浏览 效果 如 图 


6-5 所 示 ， 页 面 文件 6-2-2.html 的 关键 代码 如 下 。 


<head> 

<meta charset="utf-8"> 

<title> 行 级 元 素 的 宽 和 高 </title> 

<style> 

box2{ 

width:200px: 上 # 宽 度 200px*/ 
height100px: 上 # 高 度 100px*/ 
border 1px solid #333 : 户 边 框 为 1px 的 浅 黑色 实 线 */ 
background:#EEE: /# 浅 灰色 背景 所 
Iargin:10px : 刻 外 边 距 为 10px*/ 
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} 
</style> 
</head> 
<body> 
<div class="box2"> 这 是 块 级 元 素 (div)</div> 
<span class="box2"> 这 是 行 级 元 素 (span)</span> 
<lbody> 


【说 明 】span 是 行 级 元 素 ， 设 置 的 宽度 和 高 度 无 效 。 
4. 元 素 类 型 及 元 素 类 型 转换 


(1) 从 布局 角度 分 析 ， 文 档 中 的 元 素 都 可 以 划 归 为 块 级 元 素 和 行 级 元 素 两 种 类 型 ， 具 体 分 
析 如 下 。 
e ， 块 级 元 素 ， 块 级 元 素 的 宽度 为 100%， 始 终 占 据 一 行 。<hl>~<h6>、<p>、<ul>、<ol>、 
<li>、<table>、<div> 和 <body> 等 元 素 都 是 块 级 元 素 。 
e 行 级 元 素 ， 行 级 元 素 没有 高 度 和 宽度 ， 行 级 元 素 前 后 没有 换行 符 ， 没 有 固定 的 形状 ， 
显示 时 只 占据 内 容 的 大 小 。<a>、<img>、<strong>、<b>、<em>、<i>、<span> 和 表单 
元 素 等 都 是 行 级 元 素 。 
(2) 进行 页 面 布局 时 ， 有 些 情 况 下 需要 对 元 素 类 型 进行 转换 。 如 果 和 希望 行 级 元 素 具 有 块 级 
元 素 的 某 些 特性 (如 设置 宽 高 )， 或 者 如 果 需 要 块 级 元 素 具 有 行 级 元 素 的 某 些 特性 (如 不 独占 一 行 
排列 )， 可 以 使 用 display 属性 对 元 素 的 类 型 进行 转换 。 
display 属性 常用 的 属性 值 及 含义 如 下 : 
e@ display:inline， 元 素 将 显示 为 行 级 元 素 ( 行 级 元 素 默认 的 display 属性 值 ) 
e@ display:block， 元 素 将 显示 为 块 级 元 素 ( 块 级 元 素 默认 的 display 属性 值 ) 
e ”display:inline-block， 元素 将 显示 为 行内 块 级 元 素 ,可 以 对 其 设置 宽 高 和 对 齐 等 属性 , 但 
是 该 元 素 不 会 独占 一 行 。 
@ ”display:none， 元 素 将 被 隐藏 ， 该 元 素 及 其 所 有 内 容 不 再 显示 ， 也 不 占用 文档 中 的 空间 。 
下 面 通过 一 个 示例 来 演示 display 属性 的 用 法 和 效果 ， 如 例 6-2-3 所 示 。 
【 例 6-2-3】 设 置 行 级 元 素 按 块 级 元 素 显示 ， 本 例 页 面 6-2-3.html 的 浏览 效果 如 图 6-6 所 示 。 


COfile/WE/AladLed/4-3html 女 : 
陀 是 块 级 元 素 (div) 


C |©file///E/AMadled.. 食 | : 


这 是 块 级 元 素 (div) 


区 是 行 级 元 素 (span) ,设置 
成 按 块 级 元 素 显 示 


区 号 行 级 元 紊 (span) 


图 6-5 行 级 元 素 的 宽度 和 高 度 图 6-6 将 行 级 元 素 设置 成 块 级 元 素 后 的 宽度 和 高 度 
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修改 例 6-2-2 中 的 样式 定义 , 在 .box2 中 添加 一 行 定义 display 属性 的 代码 , 设置 元 素 类 型 显 
示 为 块 级 元 素 ， 即 可 为 span 元 素 设置 宽度 和 高 度 ， 代 码 如 下 ， 浏 览 效果 如 图 6-6 所 示 。 


display:block: 片 块 级 元 素 显示 */ 
6.2.3 ”盒子 边框 属性 


在 网 页 设计 中 ， 经 常 需要 给 元 素 设置 边框 的 显示 效果 。CSS 边框 属性 包括 边框 宽度 、 边 框 
样式 、 边 框 颜色 、 圆 角 边 框 和 边框 投影 等 。 


1. border-width( 边 框 宽度 ) 


border-width 属性 为 元 素 的 所 有 边框 设置 宽度 ， 或 者 单独 为 各 个 边框 设置 宽度 。 

语法 : border-width :1~4 medium | thin | thick | length 

参数 如 下 。 

e@ medium: 定义 中 等 的 边框 (默认 )。 

e thin: 定义 细 的 边框 。 

e@ thick: 定义 粗 的 边框 。 

e length: 自 定义 边框 的 宽度 ， 常 用 取 值 单位 为 px。 

说 明 : 使 用 border-width 属性 设置 四 条 边 的 边框 宽度 时 ， 必 须 采 用 上 、 右 、 下 、 左 的 顺 时 
针 顺 序 。 省 略 时 采用 值 复制 的 原则 ， 即 如 果 只 有 一 个 值 ， 将 用 于 四 条 边框 ， 如 果 有 两 个 值 ， 则 
用 于 上 下 /左右 边框 :如 果 有 三 个 值 ， 则 第 一 个 用 于 上 边框 ， 第 二 个 用 于 左边 框 和 右边 框 ， 第 三 
个 用 于 下 边框 。 这 样 的 写法 称 为 值 复制 。 

例如 ， 设 置 段 落 的 边框 宽度 。 

ry 让 四 边 都 是 细 的 边框 */ 

p{borer-width:2px thick: } 上 # 上 下 边框 宽度 为 2px， 左 右 是 粗 的 边框 

可 以 通过 属性 border-top-width、border-right-width、border-bottom-width 和 border-left-width 
分 别 设置 各 条 边框 的 宽度 。 

又 如 : 

border-left-width:3px: 族 左 边框 宽度 为 3px*/ 


注意 : 

如 果 border-style 设 置 为 none， 本 属性 无 效 。 如 果 边 框 样 式 是 none， 边 框 宽度 实际 上 会 重 置 
为 0。 不 允许 指定 负 宽度 值 . 

2. border-style( 边 框 样式 ) 

border-style 属性 用 于 设置 元 素 所 有 边框 的 样式 ， 或 者 单独 为 各 边 设 置 边框 样式 。 

语法 : border-style : 1~4 none | solid | dashed | dotted | double | groove | ridge | inset | outset 

参数 : border-style 属性 包括 多 个 边框 样式 的 参数 ， 用 于 定义 不 同 的 边框 样式 ， 具 体 如 下 。 

e@ none: 无 边框 。 

e@ solid: 边框 为 单 实 线 。 
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dashed: 边框 为 虚线 。 
dotted: 边框 为 点 线 。 
double: 边框 为 双 实 线 。 
groove: 根据 border-color 的 值 画 3D 凹 模 。 
ridge: 根据 border-color 的 值 画 棱 形 边框 。 
inset: 根据 border-color 的 值 画 3D 凹 边 。 
outset: 根据 border-color 的 值 画 3D 凸 边 。 
说 明 : 使 用 borderstyle 属 性 设置 四 条 边框 的 样式 时 ， 必 须 采 用 上 、 右 、 下 、 左 的 顺 时 针 顺 
序 。 省 略 时 采用 值 复 制 的 原则 ， 使 用 方法 和 border-width 相 同 。 
例如 ， 设 置 段落 的 边框 样式 。 
p{border-style:solid: } 刻 四 边 都 是 实 线 */ 
p{border-style:dashed solid: } 让 上 下 边 虚 线 ， 左 右边 实 线 */ 
p{border-style:solid dashed double: } /* 上 边 实 线 ， 左 右边 虚线 ， 下 边 双 实 线 */ 
可 以 通过 属性 border-top-style、borderright-style、border-bottom-style 和 border-left-style 分 别 
设置 各 条 边框 的 样式 。 
例如 : 
border-top-style:solid; 上 # 上 边框 为 实 线装 


注意 : 
如 果 border-width 不 大 于 0， 本 属性 无 效 。 


3. border-color( 边 框 颜色 ) 


border-color 属 性 用 于 设置 四 条 边框 的 颜色 , 可 设置 一 个 元 素 的 所 有 边框 中 可 见 部 分 的 颜色 ， 
或 者 为 四 条 边框 分 别 设置 不 同 的 颜色 。 

语法 : border-color :1~4 color 

参数 :color 的 取 值 有 如 下 几 种 。 

e@ 预定 义 的 颜色 值 ， 如 blue、gray、red 和 yellow 等 。 

e 十 六 进 制 值 吉 RGGBB。 

e RGB 代码 rgb(r,g,b)。 

说 明 : 使 用 border-color 属 性 设置 四 条 边框 的 颜色 时 ， 只 设置 1 个 、2 个 、3 个 和 4 个 值 ， 使 
用 值 复制 的 原则 与 边框 宽度 、 边 框 样式 的 设置 相同 。 

例如 ， 设 置 段落 的 边框 颜色 。 

Pp{border-color#CCC: } 上 # 四 条 边框 的 颜色 都 是 灰色 所 

P{border-color#CCC 证 F0000:} 片上 下 边 灰 色 ， 左 右边 红色 */ 

可 以 通过 属性 border-top-color、border-right-color、border-bottom-color 和 border-left-color 分 
别 设置 各 条 边框 的 颜色 。 

例如 : 

border-right-color:#999; 人 # 右 边框 灰色 志 
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注意 2 
如 果 border-width 不 大 于 0 或 border-style 设置 为 none， 本 属性 无 效 。 


【 例 6-2-4】 设 置 边 框 的 样式 ,本 例 在 浏览 器 中 的 显示 效果 如 图 6-7 所 示 , 页 面 文件 6-2-4.html 
的 关键 代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title> 边 框 设 置 </tide> 
<style> 
box4{ 
width-200px: 证 宽度 为 200px*/ 
height:100px: 上 # 高 度 为 100px*/ 
border-width: 1px 2px Spx ; 上 #* 上 、 右 、 下 、 左 边框 宽度 分 别 为 lpx、2px、5px、2px*/ 
border-style:dotted solid double: 。 上 、 右 、 下 、 左 边框 样式 分 别 为 点 线 、 实 线 、 双 实 线 、 实 线 */ 
border-color: #333 green: 启 上 、 右 、 下 、 左 边框 颜色 分 别 为 黑色 、 绿 色 、 黑 色 、 绿 色 */ 
} 
</style> 
</head> 
<body> 
<p dlass="box4"> 勤 劳 一 日 .可 得 一 夜 安眠 ， 勤 劳 一 生 , 可 得 幸福 长 眼 。</p> 
</body> 
© OfleN/E/A.. 们 | ! 
劳 一 日 可 得 一 夜 安眠 ; 支 
生 , 可 得 幸福 长 眠 。 
图 6-7 边框 样式 设置 
注意 : 


定义 边框 样式 时 ， 需 要 把 border-style 属性 的 声明 放 到 border-color 属性 之 前 ， 元 素 必须 在 
改变 颜色 之 前 获得 边框 。 
4. border( 边 框 综合 属性 设置 ) 


用 复合 属性 border-top、border-right、border-bottom 和 border-left 设置 一 条 边框 的 样式 。 
语法 : border-top: border-width border-style border-color 

说 明 : 上 面 是 上 边框 的 复合 样式 ， 其 他 各 边框 的 设置 方法 与 此 相同 。 

例如 : 


border-bottom:2px solid #999: /# 下 边框 样式 为 2px 的 灰色 实 线 */ 
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用 border 属性 设置 四 条 边框 共同 的 样式 。 


语法 : border:border-width border-style border-color 片 四 条 边框 的 样式 */ 
例如 : 
border: 1px solid green: 人 # 四 条 边框 都 是 1px 的 绿色 实 线 */ 


【 例 6-2-5】 边框 样式 综合 设置 ， 在 例 6-2-4 中 ， 修 改 .box4 中 定义 的 边框 样式 ， 用 复合 属性 
进行 设置 ， 代 码 如 下 。 


box4{ 
width:200px: /# 宽 度 为 200px*/ 
height:100px: 证 高 度 为 100px*/ 
border-top:1px dotted #333; 片上 边框 Ilpx， 点 线 ， 黑 色 */ 
border-right:2px solid green: 片 右 边框 2px， 实 线 ， 绿 色 */ 
border-bottom: Spx double #333: 证 下 边框 Spx， 双 实 线 ， 黑 色 */ 
border-left:2px solid green: 片 左边 框 2px， 实 线 ， 绿 色 */ 


;3 
5. border-radius( 圆 角 边框 ) 


在 网 页 设计 中 ， 经 常 需要 设置 圆 角 边框 ， 运 用 CSS3 中 的 border-radius 属性 能 实现 圆 角 边 
框 的 效果 。 

语法 : border-radius:1~4 length |%/ 1~4 length |% 

参数 如 下 。 

e length: 自 定义 圆 角 半径 的 大 小 ， 常 用 取 值 单位 为 px。 

e %: 以 百分比 定义 圆 角 半径 的 大 小 。 

e /前 的 参数 表示 圆 角 的 水 平 半径 ，/ 后 的 参数 表示 圆 角 的 垂直 半径 ， 两 个 参数 之 间 用 “/” 

隔 开 。 如 果 只 有 一 个 参数 ， 则 水 平 半径 和 垂直 半径 相同 。 

说 明 : 在 上 面 的 语法 格式 中 ， 四 个 属性 值 按 顺序 设置 盒子 的 左上 角 、 右 上 角 、 右 下 角 和 左 

下 角 四 个 圆 角 半径 。 属 性 值 遵循 值 复制 的 原则 ， 可 以 设置 1~4 个 值 ， 具 体 如 下 。 


@ 水平 半径 参数 和 垂直 半径 参数 只 有 一 个 值 ， 则 四 个 角 的 圆 角 半径 设置 相同 的 值 。 
e 水 平 半径 参数 和 垂直 半径 参数 有 两 个 值 ， 则 第 一 个 值 设置 左上 和 右 下 的 圆 角 半径 ， 第 
二 个 值 设置 右上 和 左下 的 圆 角 半径 。 


e@ 水 平 半径 参数 和 垂直 半径 参数 有 三 个 值 ， 则 第 一 个 值 设置 左上 的 圆 角 半径 ， 第 二 个 值 
设置 右上 和 左下 的 圆 角 半径 ， 第 三 个 值 设置 右 下 的 圆 角 半径 。 
e@ 水 平 半径 参数 和 垂直 半径 参数 有 四 个 值 ， 则 第 一 个 值 设置 左上 的 圆 角 半径 ， 第 二 个 值 
设置 右上 的 圆 角 半径 , 第 三 个 值 设置 右 下 的 圆 角 半径 ， 第 四 个 值 设置 左下 的 圆 角 半径 。 
【 例 6-2-6】 设 置 图 片 的 边框 为 圆 角 ， 本 例 在 浏览 器 中 的 显示 效果 如 图 6-8 所 示 ， 页 面 文件 
6-2-6.html 的 关键 代码 如 下 。 
<head> 
<meta charset="utf-8"> 
<title> 圆 角 边框 </title> 
<style> 
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img{ 
ee 大 宽度 为 150px*/ 
border:3px solid #B8860B: 上 # 边 框 为 3px 的 棕 黄色 实 线 */ 
border-radius:30px; 刻 圆 角 半 径 为 30px*/ 
} 
</style> 
</head> 
<body> 
<img src="img/picl jpe" > 
<lbody> 
【说 明 】 上 面 代码 中 的 圆 角 半径 只 有 一 个 属性 值 ， 因 此 四 个 角 的 圆 角 半径 相同 。 因 为 只 有 一 
个 参数 ， 所 以 水 平 半径 和 垂直 半径 相同 ， 都 是 30px。 
【 例 6-2-7】 为 四 个 角 设 置 不 同 的 圆 角 边框 ， 本 例 页 面 6-2-7.html 的 浏览 效果 如 图 6-9 所 示 。 
修改 例 6-6 中 的 代码 ， 为 四 个 角 设置 不 同 的 圆 角 半径 ， 代 码 如 下 。 


border-radius: 20px 60px/10px 40px: 
【说 明 】 上 面 代码 中 ， 设 置 左上 和 右 下 圆 角 的 水 平 半径 为 20px、 垂 直 半径 为 10px， 右 上 和 
左下 圆 角 的 水 平 半径 为 60px、 垂 直 半 径 为 40px。 


VD memme x 
t C | Ofile///E/A... i C | Ofle///E/AL.. | 1; 


图 6-8 圆 角 边框 图 6-9 ”四角 不 同 的 圆 角 边框 


6. box-shadow( 盒 子 阴影 ) 


在 网 页 制作 中 ， 有 时 需要 为 盒子 添加 阴影 效果 。CSS3 的 box-shadow 属性 实现 了 向 边框 添 
加 一 个 或 多 个 阴影 。 
语法 : box-shadow: h-shadow v-shadow blur spread color inset 
参数 如 下 。 
e@ h-shadow: 水 平 阴影 的 位 置 ， 人 允许 负 值 ， 必 需 。 
V-shadow: 垂直 阴影 的 位 置 ， 允 许 负 值 ， 必 有 需 。 
blur: 模糊 距离 ， 可 选 。 
spread: 阴影 的 尺寸 ， 可 选 。 
color: 阴影 的 颜色 ， 可 选 。 
inset: 将 外 部 阴影 (outseb 改 为 内 部 阴影 ， 可 选 。 
说 明 : box-shadow 向 边框 添加 一 个 或 多 个 阴影 。 多 个 阴影 时 由 逗号 分 隔 ， 每 个 阴影 由 2~4 
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个 长 度 值 、 可 选 的 颜色 值 以 及 可 选 的 inset 参数 规定 。 省 略 长 度 的 值 是 0。 
【 例 6-2-8】 制 作 投影 按钮 ,本 例 在 浏览 器 中 的 显示 效果 如 图 6-10 所 示 , 页 面 文件 6-2-8.html 
的 关键 代码 如 下 。 


display: block: /# 块 级 元 素 显示 沁 


border: 1px solid #B8860B:; 证 边框 为 1px 的 棕 黄色 实 线 */ 
border-radius: 3px: 人 # 圆 角 半径 为 3px*/ 
box-shadow:2px 2px 2px 1px #B8860B; 。/* 设 置 向 右 下 投影 */ 
text-align:center; 性 文 本 水 平 居中 所 
line height30px: # 行 高 为 30px， 实 现 垂直 居中 允 

} 

</style> 

</head> 


<body> 
<a> 网 站 首页 </a> 

<body> 

【说 明 】 代 码 box-shadow:2px 2px 2px 1px 元 8860B:; 设 置 向 右 下 投影 ， 水 平 向 右 2px， 垂 直 
向 下 2px， 阴 影 半 径 2px， 阴 影 扩展 半径 1px， 阴 影 颜色 棕 黄 色 ， 向 外 投影 。 

box-shadow 可 以 设置 阴影 的 投射 方向 及 添加 多 重 阴 影 效 果 ， 如 例 6-2-9 所 示 。 

【 例 6-2-9】 制作 立体 按钮 ， 本 例 页 面 6-2-9.html 在 浏览 器 中 的 显示 效果 如 图 6-11 所 示 。 修 
改 例 6-2-8 中 的 代码 ， 设 置 投影 方向 和 双重 投影 ， 代 码 如 下 。 

box-shadow:2px 2px 2px 1px #B8860B inset.-2px -2px 2px 1px #B8860B inset; 

【说 明 】 上 述 代码 设置 向 内 双重 投影 , 左边 框 向 右 投影 , 上 边框 向 下 投影 , 右边 框 向 左 投影 ， 
下 边框 向 上 投影 。 


C Ofile//EA... | i 


网 站 首页 网 站 首页 


6-10 投影 按钮 6-11 立体 按钮 


6.2.4 ”盒子 模型 的 边 距 属性 


CSS 的 边 距 属性 包括 “内 边 距 ”和 “外 边 距 ”两 种 ， 进 行 页 面 布局 时 ， 经 常 需要 对 盒子 的 
内 外 边 距 进行 设置 。 
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1. padding( 内 边 距 ) 


内 边 距 指 的 是 元 素 内 容 与 边框 之 间 的 距离 ， 也 常常 称 为 内 填充 。 内 边 距 的 设置 属性 有 
padding-top( 上 内 边 距 )、padding-right( 右 内 边 距 )、padding- bottom( 下 内 边 距 ) 和 padding-lett( 左 内 
边 距 )， 可 分 别 设置 ， 也 可 以 用 padding 属性 一 次 设置 所 有 内 边 距 。 

语法 : padding-top : auto | length 

padding-right : auto | length 
padding-bottom : auto | length 
padding-left : auto | length 
padding : 1~4 auto | length 

参数 如 下 。 

e auto: 浏览 器 自动 计算 内 边 距 。 

e length: 内 边 距 值 ， 常 用 取 值 单位 为 px， 默 认 值 是 0px， 不 能 为 负数 。 

说 明 : 使 用 复合 属性 padding 定义 内 边 距 时 ， 按 顺 时针 顺 序 采用 值 复制 的 原则 ， 一 个 值 为 
所 有 内 边 距 、 两 个 值 为 上 下 /左右 内 边 距 ， 三 个 值 为 上 /左右 /下 内 边 距 。 


2. margin( 外 边 距 ) 


外 边 距 指 的 是 元 素 边 框 与 相 邻 元 素 之 间 的 距离 。 进 行 网 页 设计 时 ， 要 想 拉 开 盒子 与 盒子 之 
间 的 距离 、 合 理 地 布局 网 页 ， 就 需要 为 盒子 设置 外 边 距 。 外 边 距 的 设置 属性 有 margin-top、 
margin-right、margin-bottom 和 margin-left， 可 以 分 别 设置 ， 也 可 以 用 margin 属性 一 次 设置 所 
有 外 边 距 。 
语法 : margin-top : auto | length 
margin-right : auto | length 


margin-bottom : auto | length 
margin-left : auto | length 
margin : 1~4 auto | length 
参数 如 下 。 
e auto: 浏览 器 自动 计算 外 边 距 ， 设 置 为 对 边 的 值 。 
e@ length: 外 边 距 值 ， 常 用 取 值 单 位 为 px， 默认 值 是 0px， 可 以 为 负数 。 
说 明 : (1) 复合 属性 margin 取 1~4 个 值 的 情况 与 padding 相同 ， 但 外 边 距 可 以 使 用 负 值 ， 
使 相 邻 元 素 重 登 。(2) 对 块 级 元 素 应 用 宽度 属性 width， 并 将 左右 外 边 距 都 设置 为 nto， 可 使 块 
级 元 素 水 平 居 中 。 
【 例 6-2-10】 块 级 元 素 的 边 距 设置 ， 本 例 在 浏览 器 中 的 显示 效果 如 图 6-12 所 示 ， 页 面 文件 
6-2-10.html 的 关键 代码 如 下 。 
<head> 
<meta charset="utf-8"> 
<title> 块 级 元 素 的 边 距 设置 </title> 


text-align:center: 片 文字 水 平 居中 */ 
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box{ 
width:820px: 
heightauto: 信 高 度 按 实 际 内 容 的 高 度 显示 六 
margin:10px auto; 人 # 上 下 外 边 距 为 10px， 左 右 水 平 居中 */ 
border:2px solid#333 : 。“/* 边 框 为 2px 的 浅 黑色 实 线 */ 
} 
p{ 
padding:20px: 上 内 边 距 为 20px*/ 
margin:10px: 上 # 外 边 距 为 10px*/ 
border:2px solid #333 : 上 # 边 框 为 ?px 浅 黑色 的 实 线 */ 
} 
</style> 
</head> 
<body> 
<div class="box"> 
<h3> 企 业 简介 </h3> 


<p> 公 司 成 立 于 2008 年 ， 是 一 家 专业 照明 亮 化 工程 公司 ， 公 司 拥有 国家 一 级 工程 施工 资质 ， 同时 也 
是 一 家 集 市 政 路 灯 、 户 外 亮 化 、 照 明 工 程 设 计 、LED 室内 外 灯具 销售 及 施工 为 一 体 的 大 型 专业 
化 “照明 工程 "公司 。</p> 

<p> 公 司 现 有 员工 中 专 及 以 上 学 历 的 占 66.9%， 中 级 工程 师 占 32.8%, 高 级 工程 师 占 11.2%。 现 已 形成 
一 支 技术 精湛 ， 富 有 敬业 、 创 新 精神 的 专业 技术 型 人 才 队 伍 。</p> 


© © file///E/AladLed/chapter04/4-2-10.html 


企业 简介 


公司 成 立 于 2008 年 ， 是 一 家 专业 照明 亮 化 工程 公司 ， 公 司 拥有 国家 一 级 工程 施工 资质 ， 同 时 也 是 一 家 华 市 
政 路 灯 、 户 外 亮 化、 照明 工程 设计 、LED 挛 内 外 灯具 销售 及 施工 为 一 体 的 大 型 专业 化 “照明 工程 ”公司 。 


公司 现 有 员工 中 职 专 及 | 以 上 学 历 的 占 66.99， 中 级 工程 师 占 32.8% ， 高 级 工程 师 占 11.2%。 现 已 形成 一 支 技 
术 精 湛 ,高 有 冤 V、 创 新 精神 的 专业 技术 型 人 才 队 伍 。 


图 6-12 块 级 元 素 的 边 距 设置 


【说 明 】(1) 两 个 元 素 垂直 相遇 时 ， 外 边 距 合并 ， 在 例 6-2-10 中 ， 两 个 段落 之 间 的 外 边 距 是 
10px 而 不 是 20px。(2) 对 块 级 元 素 应 用 宽度 属性 width， 并 将 左右 外 边 距 都 设置 为 ato， 可 使 
块 级 元 素 水 平 居中 ， 图 6-12 中 的 div 分 区 水 平 居中 。 


6.2.5 “案例 制作 
【案例 : 首页 -企业 新 闻 】 在 HBuilder 中 制作 该 页 面 的 过 程 如 下 。 
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(1) 创建 项 目 ， 把 需要 的 图 片 文件 复制 到 img 文件 夹 中 。 如 果 已 建 项 目 ， 把 图 片 素材 复制 
到 已 建 项 目的 img 文件 夹 中 即 可 。 

(2) 创建 网 页 结构 文件 ， 在 当前 项 目 中 创建 HTMLS5 网 页 文件 ， 文 件 名 为 6-2.html， 关 键 代 
码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title> 首 页 -企业 新 闻 </title> 
<link href="css/6-2.css" type="text/css" rel="stylesheet"> 
</head> 
<body> 
<div class="main center"> 
<h3> 企 业 新 闻 </h3> 
<ul> 
<li><a hre 伍 "#> 因 应 智慧 汽车 概念 ，ADB 智能 LED 头 灯 系 统 发 展 迅速 ，ADB 智能 LED 头 灯 兴 起 
</la></li> 
<span class="date">2018-03-30</span> 
<li><a hre 作 ">LED 灯具 国内 业务 市 场 研讨 会 LED 灯具 国内 业务 2017-4-6</a></li> 
<span class="date">2018-03-03</span> 
<li><a hre 全 "> 车 用 、MiniLED 等 新 产品 助力 ， 亿 光 & 荣 创 看 好 营运 服务 工作 .</a></li> 
<span class="date">2018-03-03</span> 
<li><a hre 全 ">OLED 照明 市 场 的 机 会 与 挑战 -LEDinside</a></li> 
<span class="date">2018-03-03</span> 
<li><a hre 全 "> 江苏 加 快 半导体 照明 产业 发 展 ，2020 年 规模 将 达 1200 亿 .</a></li> 
<span class="date">2018-03-03</span> 
<li><a hre 全 "> 智能 照明 进入 高 速 发 展 ， 工 业 及 商业 为 最 大 应 用 场景 <,a></li> 
<span class="date">2018-03-03</span> 
<hu> 
</div> 
lbody> 
(3) 创建 外 部 样式 文件 ， 在 当前 项 目的 css 文件 夹 中 新 建 CSS 文件 ， 文 件 名 为 6-2.css， 样 
式 代码 如 下 。 
@ 定义 页 面 的 统一 样式 (针对 所 有 的 HTML 元素 定义 样式 )。 


下 


margin:0: 刻 外 边 距 为 Opx*/ 
padding:0:; 记 内 边 距 为 Opx*/ 
box-sizing:border-box: 。“ /+ 盒子 的 宽度 值 和 高 度 值 包含 元 素 的 内 边 距 和 边框 */ 
} 
body{ 人 # 设 置 页 面 的 整体 样式 六 
font-family: "微软 雅 黑 ": /* 字 体 为 "微软 雅 黑 "*/ 
font-size:13px: 证 文字 大 小 为 13px*/ 
color:#333:; 证 文字 颜色 为 灰色 */ 


} 
@ 定义 企业 新 闻 盒子 的 样式 。 
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main center{ 
‘width:390px: 
border-left:3px solid #DDD : 
border-right:3px solid #DDD : 
margin-bottom:10px: 
float:left: 
Padding:0px 20px: 
margin-top:20px ; 
margin-left:20px; 


@ h3 标题 的 样式 。 


必 左 边框 为 3px 的 浅 灰色 实 线 */ 
人 # 右 边框 为 3px 的 浅 灰 色 实 线 */ 
让 下 外 边 距 为 10px*/ 


访 上 、 下 内 边 距 为 0px， 左 、 右 内 边 距 为 20px*/ 
让 上 外 边 距 为 20px*/ 


bh3{ 
font-size:16px; 
Color:#545861: 
font-weight:500: 证 文字 粗细 为 500*/ 
margin-bottom: 12px ; 人 # 下 外 边 距 为 120px*/ 
出 
@ 定义 新 闻 列 表 的 样式 。 
main centerullif 店 列 表 项 的 样式 */ 
border-top:1px dotted #999999; 。 /* 上 边框 为 1px 的 灰色 点 线 */ 
padding:Spx Opx: 让 上 、 右 、 下 、 左 内 边 距 依次 为 5px、0px、5px、0px*/ 
white-space:nowrap: 上 # 强 制 文 本 不 能 换行 %/ 
overflow:hidden: 让 隐藏 滋 出 文本 */ 
text-overflow:ellipsis; 证 洲 出 文本 被 裁 区 ， 显 示 省 略 标记 */ 
line-height: 19px: 必 行 高 为 19px*/ 
} 
main_center ul li:before{ 证 在 列表 项 内 容 前 插入 三 角 图 标 */ 
content:url(../img/triangle-icon-blue.jpe): 
padding-right:4px: 
} 
@ 定义 日 期 的 样式 。 
.main_center.date{ 
Color:#999999; 
display:block: 人 # 块 级 元 素 所 
margin:00 10px 10px: 上 # 上 、 右 、 下 、 左 外 边 距 依次 为 Opx、0px、10px、10px*/ 


} 


@ 定义 无 序列 表 中 超 链 接 的 样式 。 


ulaf 
text-decoration:none; 
Color:#333333:; 


上 文本 无 修饰 六 
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ul ahover{ 
color:red: 
text-decoration-underline; 片 加 下 画 线 */ 
(4) 在 浏览 器 中 浏览 网 页 ， 显 示 效 果 如 图 6-2 所 示 。 
【案例 说 明 】(1) 本 例 中 企业 新 闻 模 块 左右 两 侧 的 紧 线 ， 是 通过 设置 “class=main center” 
的 div 盒子 的 左右 边框 实现 的 。 (2) 每 条 新 闻 上 面 的 点 线 ， 是 通过 设置 无 序列 表 项 的 上 边框 
实现 的 。(3) 通过 定义 各 个 元 素 的 内 外 边 距 ， 实 现 布局 的 美化 。 


在 网 页 设计 中 ， 经 常 使 用 单一 纯色 或 图 像 作 为 元 素 的 背景 来 丰富 页 面 的 视觉 效果 。 


6.3.1 案例 分 析 


【案例 展示 】 网 站 头 部 设计 。 
使 用 CSS 文本 、 图 片 和 背景 的 知识 ， 设 计 网 站 头 部 局 部 页 面 ， 本 例文 件 6-3.html 在 浏览 器 
中 的 显示 效果 如 图 6-13 所 示 。 


J D ma 
© | © fileW//EVAladLed/chapter06/4-3html 


| 


图 6-13 ”网 站 头 部 局 部 页 面 


【知识 要 点 】 盒 子 背景 颜色 、 背 景 图 片 、 渐 变 背 景 的 设置 。 
【学 习 目标 】 掌 握 盒子 背景 属性 的 设置 方法 。 


6.3.2 background 属性 


background 用 于 设置 元 素 盒子 的 背景 属性 。 可 以 设置 如 下 属性 。 
e@ _ background-color: 设置 背景 颜色 。 
background-image: 设置 背景 图 像 。 

background-repeat: 设置 如 何平 铺 背景 图 像 。 
background-position: 设置 背景 图 像 的 位 置 。 
background-size: 设置 背景 图 像 的 尺寸 。 

background-origin: 设置 背景 图 像 的 定位 区 域 。 
background-clip: 设置 背景 的 绘制 区 域 。 
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@ background-attachment: 设置 背景 图 像 是 否 固定 或 随 页 面 滚动 。 
设置 背景 时 建议 使 用 background 属性 , 而 不 是 分 别 使 用 单个 属性 , 因为 这 个 属性 在 较 老 的 
浏览 器 中 能 够 得 到 更 好 的 支持 ， 而 且 需 要 键入 的 字母 也 更 少 。 下 面 逐 个 介绍 这 些 属性 的 用 法 。 


1. background-color( 背 景 颜色 ) 


语法 : background-color: color | transparent 

参数 如 下 。 

e color: 指定 颜色 , 可 使 用 预定 义 的 颜色 值 十 六 进 制 值 # RRGGBB 或 RGB 代码 rgb(r,g,b)。 

e@ ”transparent: 默认 值 ， 即 背景 透明 ， 此 时 子 元 素 会 显示 其 父 元 素 的 背景 。 

说 明 : background-color 不 能 继承 ， 如 果 一 个 元 素 没有 指定 背景 色 ， 背 景 就 是 透明 的 ， 显 示 
其 父 元 素 的 背景 。 

【 例 6-3-1】 背 景 颜色 设置 , 本 例 在 浏览 器 中 的 显示 效果 如 图 6-14 所 示 , 页 面 文件 6-3-1.html 
的 关键 代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title> 背 景 颜色 设置 </title> 
<style> 
D3{ 
text-align:center: 文字 水 平 居中 */ 
} 
body{ 
background-color: #EEEEEE: 让 背景 颜色 */ 
} 
Pp{ 
borderSpx dotted #333; 让 边框 是 5px 的 浅 黑 色 点 线 */ 
padding:20px: 族 内 边 距 为 20px*/ 
background-color:reb(220.230.230): ”/* 背 景 颜 色 */ 
} 
</style> 
</head> 


<body> 
<h3> 企 业 简介 </h3> 
<p> 公 司 成 立 于 2008 年 ， 是 一 家 专业 照明 亮 化 工程 公司 ， 公 司 拥 有 国家 一 级 工程 施工 资质 ， 同 时 也 是 一 
家 集 市 政 路 灯 、 户 外 亮 化 、 照 明 工程 设计 、LED 室内 外 灯具 销售 及 施工 为 一 体 的 大 型 专业 化 "照明 
工程 "公司 。</p> 
<lbody> 
【说 明 】(1) 标题 文本 没有 设置 背景 色 ， 默 认为 透明 背景 (ransparenD， 显 示 其 父 元 素 的 背景 
颜色 。(2) 背景 颜色 设置 包括 元 素 盒子 的 内 边 距 和 边框 。 


2. background-image( 背 景 图 像 ) 


语法 : background-image : trl(url) | none 
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参数 如 下 。 

e@ ul: 表示 要 插入 背景 图 片 的 路 径 。 

e@ none: 表示 不 加 载 图 片 。 

【 例 6-3-2】 背 景 图 像 设 置 ， 本 例文 件 6-3-2.html 的 浏览 效果 如 图 6-15 所 示 。 
在 例 6-3-1 的 基础 上 ， 修 改 CSS 样式 ， 代 码 如 下 。 


<style> 
bh3{ 
ti :文字 水 平 居中 */ 
} 
body{ 
background-image-url(img/bgljpg): /人 * 设 置 背 景 图 像 */ 
} 
p{ 
border:Spx dotted #333; 证 边框 是 5px 的 浅 黑色 点 线 */ 
padding:20px: 人 # 内 边 距 为 20px*/ 
} 
</style> 
【说 明 】 当 背景 图 像 的 大 小 小 于 应 用 该 背景 的 盒子 时 ， 背 景 自 动 沿 水 平和 垂直 方向 平 铺 。 
LIJLIEIG J 
/站 部 景 加 像 设 置 x 玫 
| O'MyW/E/Aad echapterd4.: 友 CO fe/EIAladled/chapter0. 女 | 
企业 简介 企业 简介 
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; 公司 成 立 于 2008 年 ， 是 一 家 专业 申明 况 化 工 


;公司 成 立 于 2008 年 ,是 一 家 专业 8 明 过 化 工 
: ” 程 公司 ， 公 司 拥有 国家 一 级 工程 施工 资质 ， 同 ; 程 公司 人 的 

; 夺 也 一 衣 人 下 、 户 外 亮 化 、 照明 ， 
pes LED 室 内 及 施工 为 一 
:大 型 专业 化 “照明 工程 ”公司 。 日 et DD 
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图 6-14 背景 颜色 设置 


3. background-repeat( 设 置 背景 平 铺 ) 
默认 情况 下 ， 背 景 图 像 会 自动 沿 着 水 平和 垂直 两 个 方向 平 铺 ， 如 果 不 希望 图 像 平 铺 ， 或 者 


只 沿 着 一 个 方向 平 铺 ， 可 以 通过 background-repeat 属性 来 控制 。 


语法 : background-repeat : repeat | no-repeat | repeat-x | Tepeat-y 
参数 如 下 。 

® repeat: i ah ge 

e ”no-repeat: 不 平 铺 ( 图 像 位 于 元 素 的 左上 角 ， 只 显示 一 幅 )。 
@ ”repeat-x: 只 沿 水 平方 向 平 铺 。 

e@ ”repeat-y: 只 沿 垂直 方向 平 铺 。 
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【 例 6-3-3】 设置 背景 图 像 不 平 铺 ， 本 例文 件 6-3-3.html 的 浏览 效果 如 图 6-16 所 示 。 
在 例 6-3-2 的 基础 上 ， 修 改 <body> 标 签 的 CSS 样式 ， 代 码 如 下 。 


body{ 
background-image: url(img/bg2.jpe): 片 设置 背景 图 像 */ 
background-repeat: no-repeat: 证 背 景 不 平 铺 */ 
} 


【说 明 】 设 置 背景 图 像 不 平 铺 时 ， 背 景 图 像 位 于 所 在 盒子 的 左上 角 。 本 例 中 <body> 的 背景 
图 像 设置 为 no-repeat， 背 景 图 像 位 于 HTML 页 面 的 左上 角 。 

【 例 6-3-4】 设 置 背景 图 像 水 平平 铺 ， 本 例文 件 6-3-4.html 的 浏览 效果 如 图 6-17 所 示 。 

在 例 6-3-2 的 基础 上 ， 修 改 <body> 标 签 的 CSS 样式 ， 代 码 如 下 。 


body{ 
background-image: url(img/bg2jpg); ”/* 设 置 背景 图 像 */ 
background-repeatTepeat-x: /# 背 景 水 平平 铺 #/ 
} 
; LIEIGTL 有 Eye eea 
及“ 口 二 x 忆 Dk * We 
C ©file///E/Aladled/chapter04... 安 : C Ofile///E/Aladled/chapter04.. 衣 | 


年 ， 是 一 家 专业 照明 亮 化 工 


; 程 公 拥有 国家 一 级 工程 施工 资质 ，。; 
;同时 人 请 是 亚 家 集 市 政 路 灯 、 户 外 亮 化 、 照 明 工 ， 和 同 家 集 市 政 路 灯 . 化 、 
;。 程 设计 、LED 室 内 外 灯具 销售 及 施 工 为 一 体 了 ;， 程 设计 、LED 室 内 外 灯具 销售 及 施工 为 
;的 大 型 专业 化 “昭明 工程 ”公司 。 ;的 大 型 专业 化 “照明 工程 ”公司 。 


图 6-16 背景 图 像 不 平 铺 图 6-17 背景 图 像 水 平平 铺 


4. background-position( 设 置 背 景 位 置 ) 


的 background-position 属性 设置 背景 图 像 的 起 始 位 置 。 

语法 : background-position:length | length 或 background-position:position | position 

参数 如 下 。 

e ”length: 百分比 或 者 由 数字 和 单位 标识 符 组 成 的 长 度 值 。 

® position: top、 center、bottom、left、 center 和 tight 之 一 。 

说 明 : 利用 百分比 和 长 度 来 设置 图 片 位 置 时 ， 都 要 指定 两 个 值 ， 并 且 这 两 个 值 都 要 用 空格 
隔 开 。 一 个 代表 水 平 位 置 ， 另 一 个 代表 垂直 位 置 。 

设置 背景 定位 有 以 下 3 种 方法 。 

(D) 使 用 关键 字 指 定 背 景 图 像 在 元 素 盒子 中 的 对 齐 方式 。 

水 平方 向 值 : left、center、right。 垂 直方 向 值 : top、 center、 bottom。 
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两 个 关键 字 的 顺序 任意 ， 若 只 有 一 个 值 ， 则 另 一 个 默认 为 center。 

例如 ， 设 置 背景 在 盒子 顶部 中 间 显 示 。 

background-position:center top: 

(2) 使 用 长 度 进行 背景 定位 ， 最 常用 的 长 度 单 位 是 像素 (px)， 直 接 设置 图 像 左 上 角 在 元 素 盒 
子 中 的 位 置 。 

例如 ， 设 置 背景 在 距 盒子 左 侧 30px、 距 顶部 50px 的 位 置 开 始 显示 。 

background-position:30px SOpx: 

(3) 使 用 百分比 进行 背景 定位 ， 其 实 是 将 背景 图 像 按 百分比 指定 的 位 置 和 元 素 的 百分比 位 
置 对 齐 。 

例如 ， 设 置 背 景 与 盒子 的 左上 角 对 齐 显示 。 

background-position:0% 096: 

又 如 ， 设 置 背 景 与 盒子 的 中 央 对 齐 显示 。 

background-position:50% 50%; 

【 例 6-3-5】 背 景 图 像 定位 ， 本 例文 件 6-3-5.html 的 浏览 效果 如 图 6-18 所 示 。 

在 例 6-3-3 的 基础 上 ， 修 改 <body> 标 签 的 CSS 样式 ， 增 加 背景 图 像 定位 功能 ， 代 码 如 下 。 


body{ 
background-image:url(img/bg03.jpg); 。 /* 设 置 背 景 图 像 */ 
background-repeat:no-repeat: 证 背景 不 平 铺 */ 
background-position:50% top: /# 背 景 水 平 居中 、 垂 直 项 端 对 齐 显示 所 


5. background-size( 设 置 背景 图 像 的 尺寸 ) 


语法 : background-size : length | percentage | cover | contain 

参数 如 下 。 

e length: 设置 背景 图 像 的 高 度 和 宽度 。 第 一 个 值 设 置 宽 度 ， 第 二 个 值 设置 高 度 。 如 果 只 
设置 一 个 值 ， 则 第 二 个 值 会 被 设置 为 “auto”。 

epercentage: 以 父 元 素 的 百分比 来 设置 背景 图 像 的 宽度 和 高 度 。 第 一 个 值 设置 宽度 ， 第 
二 个 值 设置 高 度 。 如 果 只 设置 一 个 值 ， 则 第 二 个 值 会 被 设置 为 “auto”。 

e@ cover: 把 背景 图 像 扩 展 至 足够 大 ， 以 使 背景 图 像 完 全 覆盖 背景 区 域 。 背 景 图 像 的 某 些 
部 分 也 许 不 会 显示 在 元 素 盒子 中 。 

e contain: 把 背景 图 像 扩展 至 最 大 尺寸 以 使 其 宽度 和 高 度 完全 适应 内 容 区 域 。 元 素 盒子 
的 某 些 区 域 可 能 没有 背景 图 像 。 

【 例 6-3-6】 设 置 背景 图 像 大 小 ， 本 例文 件 6-3-6html 的 浏览 效果 如 图 6-19 所 示 。 

在 例 6-3-3 的 基础 上 ， 修 改 <body> 标 签 的 CSS 样式 ， 设 置 背景 图 像 大 小 ， 代 码 如 下 。 


body{ 
background-image: url(img/bg03.jpg):  /* 设 置 背 景 图 像 */ 
background-repeat:no-repeat: 此 背景 不 平 铺 */ 
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background-size:cover: 上 设置 背景 大 小 完全 覆盖 背景 区 域 +/ 
} 


[aj[ls[® 3 


EENSI EA) 


/中 证 国 条 大 小 x 民 
C Ofile//E/Aladled/chapter0.. 让] : 


/雪人 直人 x WE 
C © file//E/Aladled/chapter04.. 女 | : 


; 程 公司 ， 公 司 拥有 

?同时 也 是 一 家 焦 户外 况 化 、 照 明 工 
; 程 设计 、LED 室 内 外 灯具 销售 及 施工 为 一体  ? 
;的 大 型 专业 化 “照明 工程 ”公司 。 


图 6-18 背景 图 像 定位 显示 图 6-19 设置 背景 图 像 大 小 


6. background-clip( 设 置 背景 图 像 的 显示 区 域 ) 


语法 : background-clip : border-box | padding-box | content-box 

参数 如 下 。 

e border-box: 设置 背景 图 像 覆 盖 到 盒子 边框 。 

e@ padding-box: 设置 背景 图 像 覆 盖 到 盒子 内 边 距 。 

e@ content-box: 设置 背景 图 像 覆 盖 到 内 容 区 域 。 

【 例 6-3-7】 设 置 背景 图 像 的 显示 区 域 ， 本 例文 件 6-3-7.html 的 浏览 效果 如 图 6-20 所 示 。 

在 例 6-3-1 的 基础 上 ， 修 改 <p> 标 签 的 CSS 样式 ， 设 置 背景 图 像 覆 盖 到 盒子 边框 ，CSS 代 
码 如 下 。 


pt 
border:Spx dotted #333: 证 边框 是 5px 的 浅 黑色 点 线 */ 
Padding:20px: 必 内 边 距 为 20px*/ 
background-image:urllimg/bg2 jpg): 刻 设 置 背 景 图 像 *#/ 
background-clip:border-box: 片 背 景 图 像 覆 盖 到 盒子 边框 */ 


} 
7. background-attachment( 设 置 背景 图 像 是 否 固定 或 随 页 面 滚动 ) 


语法 : background-attachment : scroll | fixed 

参数 如 下 。 

e scroll: 默认 值 。 背 景 图 像 会 随 着 页 面 的 滚动 而 移动 。 

efixed: 背景 图 像 固定 ， 当 页 面 滚 动 时 背景 图 像 不 会 移动 。 

【 例 6-3-8] 设 置 背 景 图 像 是 否 固定 或 随 页 面 滚动 , 本 例文 件 6-3-8.html 的 浏览 效果 如 图 6-21 
所 示 。 

在 例 6-3-5 的 基础 上 ， 修 改 <body> 标 签 的 CSS 样式 ， 设 置 背景 图 像 固定 ， 代 码 如 下 。 
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body{ 
background-image:url(img/bg2.jpg); ”/* 设 置 背 景 图 像 */ 
background-repeatno-repeat 片 背 景 不 平 铺 */ 
background-position:50% top: 方 设置 背景 水 平 居中 、 垂 直 顶 端 对 齐 显示 */ 
background-attachment:fixed: 片 背 景 图 像 固 定 ， 不 随 页 面 滚动 */ 


9 


ajlel® ¥ 


yy 中 背景 图 像 茂 劳 区 域 x 


C file//E/Aladled/cha... 让 : 


| | C Ofile///E/Aladled/cha.. 安 | : 
| 08 年 ， 是 一 家 专业 照 。。 ~ 
| | : 司 拥有 国家 一 级 。， 
| 家 集 市 


图 6-20 设置 背景 图 像 显示 区 域 图 6-21 设置 背景 图 像 固定 


8. background-origin( 设 置 背景 图 片 的 定位 区 域 ) 


语法 : background-origin : border-box | padding-box | content-box 

参数 如 下 。 

e@ border-box: 设置 背景 从 边框 开始 绘制 。 

e@ padding-box: 设置 背景 在 边框 内 部 绘制 (不 包括 边框 )。 

e@ content-box: 设置 背景 从 内 容 区 域 绘制 。 

说 明 : background-origin 相当 于 position， 规 定 了 图 片 开 始 绘制 的 区 域 ， 也 就 是 规定 图 片 的 
左上 角 从 什么 地 方 开始 ， 其 他 不 管 。 


9. background( 设 置 背景 的 复合 属性 ) 


在 CSS 中 ，background 属性 是 复合 属性 ， 可 以 将 背景 相关 的 样式 综合 定义 在 复合 属性 
background 中 。 使 用 background 属性 综合 设置 背景 样式 的 语法 格式 如 下 。 

background : [background-color] [background-image] [background-repeat][background- 

position][background-size][backeground-clip] [background-attachmen] 

在 上 面 的 语法 格式 中 ， 各 个 样式 顺序 任意 ， 对 于 不 需要 的 样式 可 以 省 略 。 

【 例 6-3-9】 用 复合 属性 实现 例 6-3-8 的 显示 效果 ， 并 增加 背景 颜色 ， 本 例文 件 6-3-9.html 
的 浏览 效果 如 图 6-21 所 示 。 

在 例 6-3-8 的 基础 上 ， 修 改 <body> 标 签 的 CSS 样式 ， 代 码 如 下 。 


body{ 
background:#DDDDDD url(img/bg2 jpg) no-repeat 50% top fixed: 
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10. 设置 多 重 背 景 图 像 


CSS3 中 增强 了 背景 图 像 的 功能 ， 人 允许 在 一 个 盒子 里 显示 多 个 背景 图 像 ， 使 背景 图 像 的 效果 
更 容易 控制 。 通 过 background-image、background-repeat、background-position 和 background-size 
等 属性 ， 通 过 提供 多 个 属性 值 可 以 实现 多 重 背 景 图 像 效果 ， 各 属性 值 之 间 用 逗号 隔 开 。 

【 例 6-3-10】 设 置 多 重 背 景 图 像 ， 本 例 在 浏览 器 中 的 显示 效果 如 图 6-22 所 示 ， 页 面 文件 
6-3-10.html 的 关键 代码 如 下 。 


<head> 
<meta charset utf-8 "> 


Width:600px: 
height:385px: 
background:url(img/sun png).url(img/car png).url(img/bg3 jpg): 
background-repeat: no-repeat: 
backeround-position:300px -30px,100px 260px,left bottom:; 
background-size:200px 200px.300px 100px.600px 385px: 
} 
</style> 
</head> 
<body> 
<div class="d1"> 
蓝天 ， 白 云 ， 绿 草 ， 豪 车.… 
</div> 
<body> 


CG © file///E/AladLed/chapter04/4-3-10.html 


图 6-22 多 重 背 景 图 像 设置 
【说 明 】background 属性 中 应 用 的 背景 图 片 ， 将 按 出 现 顺 序 从 上 到 下 层 县 显示 。 
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6.3.3 CSS 渐变 背景 


CSS 渐变 是 CSS3 中 新 增 的 <image> 类 型 。 使 用 CSS 渐变 可 以 在 两 种 颜色 间 产 生平 滑 的 渐变 
效果 ， 用 它 代 蔡 图 片 ， 可 以 加 快 页 面 的 载 入 时 间 、 减 小 带宽 占用 。 同 时 ， 因 为 渐变 是 由 浏览 
直接 生成 的 , 它 在 页 面 缩放 时 的 效果 比 图 片 更 好 , 因此 可 以 更 灵活 、 便捷 地 调整 页 面 布局 。CSS3 
的 渐变 属性 主要 有 线性 渐变 和 径 向 渐变 两 种 。 

1. 线性 渐变 

在 线性 渐变 过 程 中 ， 指 定 颜色 从 起 始 颜色 开始 沿 着 渐变 方向 按 顺 序 过 渡 到 结束 颜色 。 

语法 : background : linear-gradient(direction | angle, colorl [position1],.…,colom [positionn]) 

参数 如 下 。 

e@ direction: to 加 left、right、top 和 bottom 等 关键 词 ， 表 示 渐 变 方向 。 

e angle: 渐变 角度 , 单位 为 deg, 指 水 平 线 与 渐变 线 之 间 的 角度 ， 以 顺 时 针 方向 旋转 。0deg 

表示 创建 从 底部 到 项 部 的 垂直 渐变 ，90deg 表示 创建 从 左 到 右 的 水 平 渐变 。 

e color: 颜色 值 ， 用 于 设置 渐变 颜色 ， 其 中 colorl 表示 起 始 颜色 ，colom 表示 结束 颜色 。 

起 始 颜色 和 结束 颜色 之 间 可 以 添加 多 个 颜色 值 ， 各 颜色 值 之 间 用 “，” 隔 开 。 

e ”position: 颜色 停止 位 置 ， 一 般 使 用 百分比 位 置 。 

说 明 : 不 设置 渐变 角度 时 ， 默 认为 180deg， 等 同 于 to bottom ; 不 设置 颜色 停止 位 置 时 ， 
颜色 自动 均匀 地 隔 开 。 

【 例 6-3-11】 设置 渐变 背景 ， 本 例文 件 6-3-11.html 的 浏览 效果 如 图 6-23 所 示 。 

在 例 6-3-1 的 基础 上 ， 修 改 CSS 样式 ， 为 <body> 和 <p> 设 置 渐变 背景 ，CSS 代码 如 下 。 


text-align: center 证 文字 水 平 居中 */ 


height:240px: 
background: linear-gradient(to top#ffE#OFF): 上 # 向 上 的 渐变 背景 六 
} 
pt{ 
width:260px: 
border:5px dotted #333: 让 边框 是 5px 的 浅 黑 色 点 线 */ 
padding:20px: 上 # 内 边 距 为 20px*/ 
background:linear-gradient(90deg.#F0,.#EFF 80%0. 手 F0): 。 /* 向 右 的 渐变 背景 +/ 
margin: 10px auto: 
} 
</style> 
【说 明 】 在 background:linear-gradient(90deg.#EF0, 盾 FF 80%, 盾 F0): 设 置 的 渐变 颜色 中 ， 第 一 
个 和 最 后 一 个 颜色 没有 指定 位 置 ， 位 置 值 0% 和 100% 将 分 别 自动 分 配给 第 一 个 和 最 后 一 个 颜 
色 。 中 间 的 颜色 指定 80% 的 位 置 ， 指 到 该 位 置 结 束 ， 把 剩 下 的 部 分 留 给 底部 。 
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2. 重复 线性 渐变 

语法 : background : repeating-linear-gradient(direction | angle，colorl [position1],......, colom 
[positionn]) 

参数 :参考 线性 渐变 的 参数 。 

【 例 6-3-12】 设 置 重复 线性 渐变 ， 本 例文 件 6-3-12.html 的 浏览 效果 如 图 6-24 所 示 ， 关 键 代 
码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title></title> 
<style> 
-dl{ 
border: 1px solid #333; 
Iargin:SPX : 
width:200px; 
height:100px: 
background:repeating-linear-eradient(-45deg, red. red Spx, white Spx. White 10px): 


.d2{ 
border: 1px solid #333; 
margin:Spx ; 
width:200px; 
height:100px: 
background: repeating-linear-gradient(0deg, blue, white 10%, #0FF 20%%): 
} 
</style> 
</head> 


<div class="d1"></div> 
<div class="d2"></div> 


图 6-23 设置 渐变 背景 图 6-24 重复 线性 渐变 
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3. 径 向 渐变 


径 向 渐变 是 网 页 中 另 一 种 常用 的 渐变 ， 在 径 向 渐变 过 程 中 ， 起 始 颜色 会 从 中 心 位 置 开始 ， 
依据 椭圆 或 圆 形 形 状 进行 扩张 渐变 。 

语法 : background : radial-gradient([shape] [center],colorl[position1],.…, colom[positionn]) 

参数 如 下 。 

@ ”shape: 定义 形状 ， 取 值 为 circle( 圆 形 ) 或 ellipse( 椭 圆 形 )。 默 认 值 是 ellipse。 

e center: 渐变 的 中 心 位 置 ， 使 用 at 加 上 关键 字 或 参数 值 来 定义 径 向 渐变 的 中 心 位 置 。 
心 的 横 坐 标 取 值 可 以 是 百分数 、 像 素 值 、lefft、center 和 right;， 圆 心 的 纵 坐标 值 可 以 是 
百分数 、 像 素 值 、top、center 和 bottom。 省 略 参数 时 ， 默 认为 center。 

e@ color: 参考 线性 渐变 中 的 参数 说 明 。 

eposition: 参考 线性 渐变 中 的 参数 说 明 。 

【 例 6-3-13】 设 置 径 向 渐变 ， 本 例文 件 6-3-13.html 的 浏览 效果 如 图 6-25 所 示 。 

在 例 6-3-12 的 基础 上 ， 修 改 .dl 和 .d2 的 CSS 样式 ， 设 置 径 向 渐变 背景 ， 关 键 代 码 如 下 。 

.dl 背景 : 

background:radial-gradient(ellipse at 50% 50%%, Ted yellow 10%, #1E90FF 50%, white); 

.d2 背景 : 

background:radial-gradient(circle at left top, red, white 10%%. #1E90FF 50%, white): 

【说 明 】.d1 定义 了 椭圆 形 径 向 渐变 ， 渐 变 中 心 位 置 在 盒子 中 心 ， 实 现 红 、 黄 、 蓝 、 白 四 色 
径 向 渐变 。.d2 定义 了 圆 形 径 向 渐变 ， 渐 变 中 心 位 置 在 盒子 左上 角 ， 实 现 红 、 白 、 蓝 、 白 四 色 径 
向 渐变 。 

4. 重复 径 向 渐变 

语法 : background:repeating-radial-gradient([shape][center],colorl[position1],…, colom[positionn]) 

参数 : 参考 径 向 渐变 相关 参数 的 讲解 。 

【 例 6-3-14】 设 置 重 复 径 向 渐变 ， 本 例文 件 6-3-14.html 的 浏览 效果 如 图 6-26 所 示 。 


[es le lcs] eT js 


C Ofile///E/Alad.. 食 


图 6-25 径 向 渐变 图 6-26 重复 径 向 渐变 
在 例 6-3-13 的 基础 上 ， 修 改 .dl 和 .d2 的 CSS 样式 ， 设 置 重 复 径 向 渐变 背景 ， 代 码 如 下 。 
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-dl 背景 : 

backeround:repeating-radial-eradient(ellipse. red . yellow 5%. #1E90FF 1096. White 20%%): 

-d2 背景 : 

background:repeating-radial-gradient(circle at top, red, white 5%, #1E90FF 10%, white 1596): 

【说 明 】 在 .dl 定义 中 ， 省 略 了 渐变 中 心 位 置 的 定义 ， 默 认为 盒子 中 心 。 在 .d2 定义 ， 定 义 渐 
变 中 心 位 置 时 ， 只 有 一 个 参数 ， 默 认 横 坐标 是 center。 


6.3.4 ”背景 和 图 像 不 透明 度 设 置 


在 进行 网 页 制作 时 ， 如 果 和 希望 背景 或 图 像 有 滤 镜 (模糊 ) 效 果 ， 可 以 通过 设置 不 透明 度 来 实 
现 。CSS 通过 引入 RGBA 模式 和 opacity 属性 ， 对 背景 与 图 片 进行 不 透明 度 设置 。 


1. RGBA 模式 


RGBA 是 CSS3 新 增 的 颜色 模式 ， 是 RGB 颜色 模式 的 延伸 ， 在 红 、 绿 、 蓝 三 原色 的 基础 上 
添加 了 不 透明 度 参数 。 

语法 : 

rgba(r,g.,b.a) 

参数 如 下 。 

e IT: 红色 值 ， 取 值 0-255 | 0%~100%。 

e 8g8: 绿色 值 ， 取 值 0-255 | 0%~100%。 

e@ b: 蓝 色 值 ， 取 值 0~255 | 0%~100%。 

e@ a: alpha 透明 度 。 取 值 为 0.0( 完 全 透明 ) 和 1.0( 完 全 不 透明 ) 之 间 的 数字 。 

例如 : 

background:rgba(144.238.144.0.5): 证 半 透 明 的 青 苹果 绿 */ 

border:2px solid rgba(0.0.0.0.3): 证 边框 粗细 为 2px、 实 线 、 黑 色 、0.3 透明 度 */ 

说 明 : rgba0 只 作用 于 元 素 的 颜色 或 背景 色 。 设 置 了 rgba 透明 的 元 素 的 子 元 素 不 会 继承 透 
明 效 果 。 

2. opacity 属性 

在 CSS3 中 ， 可 以 使 用 opacity 属性 设置 元 素 呈 现 出 透明 效果 。 

语法 : opacity : value 

参数 如 下 。 

value: 不 透明 度 的 值 ， 取 值 为 0.0( 完 全 透明 ) 和 1.0( 完 全 不 透明 ) 之 间 的 数字 。 

例如 : 

div{opacity:0.6; } 定义 div 元 素 的 不 透明 度 为 0.6*/ 

说 明 : opacity 作用 于 元 素 以 及 元 素 内 所 有 内 容 的 透明 度 。 

【 例 6-3-15】 设 置 透 明度 ， 本 例文 件 6-3-15html 的 浏览 效果 如 图 6-27 所 示 ， 关 键 代 码 如 下 。 
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-dl 样式 的 背景 设置 : 

background:linear-gradient(to Tight reba(255.255.255.0). Tgba(255.255.255.1)) , url(img/bg4.jpe): 
-d2 样式 的 背景 设置 : 

background:-url(img/bg4jjpe): 

-d3 样式 的 背景 设置 : 


background:url(img/bg4.jpe): 
‘opacity:0.5; 


图 6-27 透明 度 设置 效果 


6.3.5 ”案例 制作 
【案例 :网 站 头 部 设计 】6-3.html 的 文档 代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title> 网 站 头 部 </title> 
<style> 
div{ 
width:1000px: 
height:150px: 
background:url(img/bg16.png) 0 0. repeating-linear-gradient(90deg.#ffE#84f14d 1%): /* 多 重 背 景 设置 */ 
backeround-repeat: no-repeat: 
margin: 0 auto; 族 实 现 左 右 居中 显示 */ 
} 
img2{ 
height:150px: 
float:right: 
} 
B{ 
font-family: "华文 行 楷 ": 
font-size:90px: 
margin-top:20px; 
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<p> 茶 &nbsp; 香 </P> 
<img stc="img/bg17.jpg" class="img2"> 
<div> 
<body> 


[ 辜 实 训 


【 实 训 任务 】 设 计 爱 德 照明 网 页 头 部 和 导航 局 部 页 面 。 本 例文 件 6-4.html 在 Chrome 浏览 器 
中 的 显示 效果 如 图 6-28 所 示 。 


TE 


CEEEN 
\ 1 C= A 
低 碳 之 选 * 绿色 生活 


图 6-28 网 页 头 部 和 导航 局 部 页 面 


【知识 要 点 】 盒 子 模型 的 基本 属性 、 背 景 颜色 以 及 背景 图 像 的 各 种 属性 和 设置 方法 。 
【 实 训 目 标 】 掌 握 盒子 模型 各 属性 的 功能 ， 并 能 通过 定义 盒子 模型 的 各 个 属性 来 美化 页 面 ; 
掌握 背景 颜色 和 背景 图 像 的 定义 方法 ， 并 能 对 页 面 元 素 进 行 背景 设计 。 


6.4.1 任务 分 析 


1. 页 面 结构 分 析 


根据 页 面 效果 图 和 经 验 分 析 得 出 ， 页 面 整体 内 容 可 以 放 在 一 个 盒子 中 进行 布局 ， 包 括 网 页 
头 部 、 导 航 和 网 页 正文 等 ， 本 例 只 设计 网 页 头 部 和 导航 局 部 页 面 。 

在 网 页 头 部 设置 背景 颜色 和 背景 图 片 , 背景 图 片上 方 的 左 侧 显示 网 站 Logo， 右 侧 显示 超 链 
接 文本 ， 中 部 显示 网 站 主题 “照明 材料 ”。 导 航 部 分 是 到 其 他 页 面 的 超 链接 。 
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2. CSS 样式 分 析 


(1) 整个 页 面 的 布局 通过 盒子 模型 实现 ， 外 层 盒子 body 的 宽度 为 1050px， 左 右 居 中 。 在 
body 中 ， 自 上 而 下 地 放置 头 部 (header)、 导 航 (nav)。 

(2) 为 网 页 头 部 同时 设置 了 背景 颜色 和 背景 图 像 ， 并 对 背景 图 像 进行 了 定位 显示 。 背 景 图 
像 上 方 的 网 站 Logo 居 左 显示 ，“ 官 方 微 信 ”“ 管 理 员 登录 ”“ 会 员 注 册 ” 超 链接 文本 用 一 个 
div 放置 居 右 显示 ，“ 照 明 材料 ”所 在 的 盒子 通过 设置 外 边 距 实现 合理 布局 。 

(3) 为 导航 部 分 设置 了 线性 渐变 的 背景 ，nav 的 宽度 和 body 的 宽度 相同 ， 用 CSS 定义 导航 
样式 。 


6.4.2 ”任务 实现 
1. 创建 页 面 文件 


(1) 启动 HBuilder， 把 需要 的 图 片 资料 复制 到 当前 项 目的 img 文件 夹 中 。 
(2) 在 当前 项 目 中 新 建 一 个 HTMLS5 文档 ， 文 件 名 为 6-4.html， 页 面 文件 结构 代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title> 网 页 头 部 和 导航 </title> 
<link href="css/6-4.css" type="text/css" rel="stylesheet" /> 
</head> 
<body> 
<header> 
<img class="header-left" src="img/logo.pne" > 
<div class="header-right"> 
<a hre 人 ="#"><img sre="img/wechatl.png"/> 官 方 微 信 </a>&nbsp;<span style="color:#930">|</span> 
<a href=" "target="”blank'"> 管 理 员 登 录 </a>&nbsp:<span style="color:#930">|</span> 
<ahre 全 " " target="” blank"> 会 员 注册 </a> 
</div> 
<div class="header-text"> 照 明 材 料 </div> 
</header> 
<nav> 
<ahref=" "> 首页 </a> 
<a hre 人 "六 > 产品 中 心 </a> 
<a hre 伍 "#"> 工 程 案例 </a> 
<ahre 人 "六 > 新 闻 动 态 </a> 
<a hre 全 "##"> 招 商 加 盟 </a> 
<a hre 伍 "#"> 关 于 我 们 </a> 
<a hre 仁 "#"> 联 系 方式 </a> 
</nav> 


</body> 
2. 创建 CSS 样式 文件 


创建 外 部 样式 文件 ， 在 当前 项 目的 css 文件 夹 中 新 建 一 个 CSS 文件 ， 文 件 名 为 6-4.css， 样 
式 代 码 如 下 。 
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(1) 整个 页 面 body 的 样式 ， 宽 度 为 1050px， 左 右 居 中 ， 并 定义 文本 的 字体 、 大 小 和 颜色 。 
*{ padding:0: margin:0: } 


body{ 片 设置 页 面 的 整体 样式 */ 
width:1050px: 上 宽度 为 1050px*/ 
margin:0 auto: 证 页 面 左右 居中 对 齐 */ 
font-family: "微软 雅 黑 ": ”~* 字 体 为 "微软 雅 黑 "*/ 
font-size:13px: 证 文字 大 小 为 13px*/ 
Color#333; A 文字 颜色 为 灰色 */ 
position:relative 片 相 对 定位 */ 


} 
(2) 网 页 头 部 的 CSS 样 式 ， 设 置 背景 颜色 和 背景 图 像 ， 背 景 图 像 离 顶部 50px。 


header { 
height:250px: :高 度 为 250px*/ 
background-color-#FFFFEE ; 片 背 景 颜 色 */ 
background-image-url(./img/banner jpg); /* 背 景 图 像 */ 
background-repeat: no-repeat: 片 背 景 图 像 不 平 铺 */ 
background-position: center S0px: /# 背 景 图 像 位 置 ， 左 右 居中 ， 离 顶部 50px*/ 
} 


(3) 网 站 Logo、 官 方 微 信 、 管 理 员 登录 和 会 员 注册 超 链 接 的 样式 定义 。 
‘header-left{ 
heights0px: /* 高 为 50px*/ 
小 


‘header-right{ 
width:250px: 
height:S0px: 
Jine-height:S0px: 必 行 高 为 50px*/ 
float:right: 此 向 右 浮动 */ 
} 
‘header-right img{ 
Width:25px: 
height:21px: 
3 
‘header-right af 族 普 通 链接 和 访问 过 的 链接 的 样式 */ 
text-decoration:none; 让 文本 无 修饰 */ 
color:#111111: 
} 
(4) 头 部 文本 “照明 材料 ”的 CSs 样 式 ， 通 过 外 边 距 设置 显示 位 置 。 
.header-text{ 
font-size:40pX: 
color#4FAC00: 
Iargin-top:10pX: 
margin-left:150px: 
有 
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(5) 导航 栏 样式 ， 定 义 高 度 、 上 下 边框 和 渐变 背景 。 
Dav 
margin-bottom:Spx: 
height:36px; 
background-image:linear-eradient(0deg.#9cf#fF 60%.#9cf 100%): 
border-bottom: 1px solid #DBEAEE: 
border-top: 1px solid #DBEAEE: 


(6) 导航 栏 中 超 链接 的 样式 , 把 超 链接 标签 <a> 转 换 成 inline-block 元 素 后 , 设置 宽度 和 高 度 ， 
通过 设置 行 高 、 内 边 距 、 外 边 距 和 文本 居中 等 属性 ， 实 现 合理 的 布局 效果 。 


nava{ 
display:inline-block: 证 行内 级 联 元 素 */ 
Width:90px: 
height:36px; 
line-height:36px: 证 行 高 36px， 实 现 上 下 垂直 居中 */ 


padding:0px 8px 0px 8px: ”+ 上、 右 、 下 、 左 内 边 距 依次 为 0px、8px、0px、8px*/ 
margin:0 10px 0 20px: 上 # 上 、 右 、 下 、 左 外 边 距 依次 为 Opx、10px、0px、20px*/ 
text-decoration:none; /# 链 接 无 修饰 和 

text-align:center; 刻 文 本 居中 对 齐 */ 

font-family:tahoma; 

font-size:14px; 

color#333: 

font-weight:bold: 证 字体 加 粗 */ 


3. 浏览 网 页 
在 Chrome 浏览 器 中 浏览 网 页 ， 效 果 如 图 6-28 所 示 。 


本 章 小 结 


本 章 全 面 讲述 了 盒子 模型 的 各 种 属性 及 其 设置 方法 。 首 先 ， 介 绍 了 盒子 模型 的 基本 概念 。 
接 下 来 ， 介 绍 了 盒子 的 各 种 外 观 属性 及 其 设置 方法 ， 包 括 盒子 的 宽 高 、 边 框 属性 、 边 距 属性 等 。 
之 后 ， 介 绍 了 盒子 的 背景 属性 及 其 设置 方法 ， 包 括 背 景 颜色 、 背 景 图 像 、 渐 变 背 景 等 。 最 后 ， 
通过 案例 制作 ， 演 示 了 如 何在 网 页 中 灵活 设置 元 素 盒子 的 各 种 属性 以 达到 合理 的 显示 效果 。 


[9 练习 题 


1. 使 用 盒子 模型 的 属性 ， 设 计 如 图 6-29 所 示 的 首页 联系 方式 局 部 页 面 。 
2. 使 用 CSS 对 页 面 中 的 元 素 进行 修饰 ， 制 作 完成 后 的 效果 如 图 6-30 所 示 。 
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D633-3981234 
400-180-6789 

地 址 :山东 省 日 照 市 学 范 路 
科技 工业 园 A 区 16 号 


图 630 相框 制作 


3. 使 用 CSS 对 页 面 中 的 元 素 进行 修饰 ， 制 作 完成 后 的 效果 如 图 6-31 所 示 。 
4. 使 用 CSS 设计 如 图 6-32 所 示 的 图 形 。 


图 6-31 背景 设置 图 6-32 图 形 设计 
5. 使 用 CSS 设计 如 图 6-33 所 示 的 播放 按钮 。 


图 6-33 设计 播放 按钮 
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传统 网 页 是 采用 表格 进行 布局 的 ， 但 这 种 方式 已 经 逐渐 淡出 设计 舞台 ， 取 而 代 之 的 是 符合 
Web 标准 的 DIV+CSS 布局 方式 。 另外, HTMELS5 中 又 新 增 了 网 页 结构 布局 标签 ， 更 方便 了 页 面 
的 布局 设计 。 本 章 将 详细 介绍 网 页 布局 技术 及 实际 应 用 。 


本 章 的 学 习 目标 : 

e 理解 布局 标签 +CSS 的 页 面 布局 方式 ， 掌 握 对 页 面 进行 分 块 的 技术 。 
e 掌握 结构 元 素 的 使 用 ， 使 页 面 分 区 更 明确 。 

e 理解 元 素 的 浮动 ， 能 够 为 元 素 设置 浮动 样式 。 

e 熟悉 清除 浮动 的 方法 ， 能 够 使 用 不 同方 法 清除 浮动 。 

e 掌握 元 素 的 定位 ， 能 够 为 元 素 设置 常见 的 定位 模式 。 

e@ 掌握 典型 的 CSS 布局 ， 能 够 使 用 CSS 布局 样式 。 


[EU 网 页 布局 标签 


除了 传统 的 div 以 外 , HTMLS5 中 新 增 了 网 页 结构 布局 标签 , 包括 header、 nav、article、 footer 
等 标签 ， 它 们 进一步 方便 了 页 面 布局 设计 。 


7.1.1 布局 标签 +CSS 布局 的 优点 


布局 标签 +CSS 布 局 是 一 种 网 页 布局 方法 , 是 目前 应 用 最 广泛 的 网 页 布局 方法 。 把 网 页 用 布 
局 标签 和 CSS 布 局 后 ， 可 以 使 网 页 的 内 容 (页 面 结构 ) 与 表现 (CSS) 相 分 离 ， 这 样 代码 会 更 简洁 ， 
有 利于 增强 用 户 的 体验 。 

布局 标签 +CSS 布 局 不 仅 是 设计 方式 的 转变 , 而 且 也 是 设计 思想 的 转变 , 这 一 转变 为 网 页 设 
计 带 来 了 许多 便利 。 采 用 布局 标签 +CSS 布 局 方式 的 优点 如 下 : 

@ 布局 标签 用 于 搭建 网 页 结构 ，CSS 用 于 创建 网 页 表现 ， 将 表现 与 内 容 分 离 ， 便 于 大 型 网 

站 的 协作 开发 和 维护 。 
e 缩短 了 网 站 的 改版 时 间 ， 设 计 者 只 要 简单 地 修改 CSS 文件 就 可 以 轻松 地 改版 网 站 。 
e@ 强大 的 字体 控制 和 排版 能 力 ， 使 设计 者 能 够 更 好 地 控制 页 面 布局 。 
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e 使 用 只 包含 结构 化 内 容 的 HTML 代 蔡 嵌 套 的 标签 , 可 以 提高 搜索 引擎 对 网 页 的 索引 效率 。 
@ 可 以 同时 对 多 个 网 页 的 格式 进行 更 新 。 


7.1.2 页面 分 块 


使 用 布局 标签 +CSS 布局 页 面 时 , 首先 对 页 面 在 整体 上 用 div 及 其 他 网 页 结构 布局 标签 进行 
分 块 ， 然 后 对 各 个 块 进行 CSS 定位 ， 最 后 在 各 个 块 中 添加 相应 的 内 容 。 
div 以 及 新 增 的 页 面 结构 布局 标签 可 以 嵌 套 ， 可 以 实现 更 为 复杂 的 页 面 排 版 。 
【 例 7-1-1】 未 嵌 套 的 div 布局 效果 如 图 7-1 所 示 ， 页 面 代码 如 下 ，CSS 样式 定义 部 分 请 参 
考 配 套 源 码 。 
<body> 
<header> 此 处 显示 "header" 的 内 容 </header> 
<div id="main"> 此 处 显示 id "main" 的 内 容 </div> 
<footer> 此 处 显示 "footer" 的 内 容 </footer> 
<body> 
以 上 代码 中 用 header、div 和 footer 标签 对 页 面 进行 分 割 , 它们 之 间 是 并 列 关系 , 没有 媒 套 。 
在 页 面 布局 结构 中 以 垂直 方向 顺序 排列 。 而 在 实际 工作 中 , 这 种 布局 方式 并 不 能 满足 工作 需要 ， 
经 常会 遇 到 div 之 间 的 嵌 套 。 
【 例 7-1-2】 嵌 套 的 div 布局 效果 如 图 7-2 所 示 ， 页 面 代码 如 下 ，CSS 样式 定义 部 分 请 参考 
配套 源码 。 
<body> 
<div id="container"> 
<header> 此 处 显示 "header" 的 内 容 </header> 
<div id="main"> 
<div id="mainbox"> 此 处 显示 id= "mainbox" 的 内 容 </div> 
<div id="sidebox"> 此 处 显示 过 ="sidebox" 的 内 容 </div> 
</div> 
<footer> 此 处 显示 "footer" 的 内 容 </div> 
</div> 


图 7-1 未 嵌 套 的 div 7-2 嵌 套 的 div 
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在 本 例 中 , id="container" 的 div 作为 存放 其 他 元 素 的 容器 , 嵌 套 了 其 他 所 有 元 素 。 id "main" 
的 div 容器 内 内 套 了 id= "mainbox" 和 "sidebox" 的 两 个 div。 


7.1.3 ”页 面 结 构 标 签 


HTML5 中 新 增 了 用 于 网 页 结构 定义 的 标签 , 包括 header、 nav、article 、aside、section footer、 
figure 和 figcaption 等 。 这 使 得 在 网 页 结构 上 定义 与 使 用 标签 更 加 语义 化 ， 让 搜索 引擎 以 及 工程 
师 能 够 更 加 迅速 地 理解 当前 网 页 的 整个 重心 所 在 。 


1. header 标签 


header 标签 用 于 定义 文档 的 页 眉 (介绍 信息 )， 可 以 包含 所 有 通常 放 在 页 面 头 部 的 内 容 ， 一 
般 用 来 放置 整个 页 面 或 页 面 内 某 个 内 容 区 块 的 标题 ， 也 可 以 包含 网 站 的 Logo 图 片 、 搜 索 表单 
或 其 他 相关 内 容 。 基 本 语法 格式 如 下 : 

<header> 

<hn> 网 页 主题 </hn> 


</header> 
2.nav 标 签 


nav 标签 用 来 将 具有 导航 性 质 的 链接 划分 在 一 起 ， 使 代码 结构 在 语义 化 方面 更 加 准确 ， 同 
时 对 屏幕 阅读 器 等 设备 的 支持 也 更 好 。 其 中 的 导航 元 素 可 以 链接 到 站 点 的 其 他 页 面 或 者 当前 页 的 
其 他 部 分 。 一 个 HIML 页 面 中 可 以 包含 多 个 nav 元 素 ， 作 为 页 面 整体 或 不 同 部 分 的 导航 。 
例如 ， 在 nav 元 素 内 部 嵌 套 无 序列 表 了 由来 定义 网 页 上 的 导航 ， 代 码 如 下 。 
<nav> 
<uP 
<li><a hre 全 和 > 网 站 首页 <Ai> 
<li><a hre 全 "六 > 产品 中 心 <li> 
<li><a hre 人 ="##> 工 程 案例 <lli> 


</nav> 

nav 标签 可 以 用 来 定义 传统 的 导航 栏 、 侧 边栏 导航 、 页 内 导航 、 翻 页 操作 等 。 

需要 注意 的 是 ， 并 不 是 所 有 的 链接 组 都 要 被 放 进 nav 元 素 ， 只 需要 将 主要 的 和 基本 的 链接 
放 进 nav 元 素 即 可 。 


3. article 标签 


article 标签 用 于 定义 文档 、 页 面 或 应 用 程序 中 与 上 下 文 相关 的 独立 部 分 ， 经 常 被 用 于 定义 
一 篇 日 志 、 一 条 新 闻 或 用 户 评论 等 。article 元 素 通常 使 用 多 个 section 元 素 进行 划分 ， 一 个 页 面 
中 article 元 素 可 以 出 现 多 次 。 

例如 ， 用 article 标签 定义 一 段 文本 ， 页 面 代码 如 下 。 
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<body> 
<article> 
<h3>article 标签 定义 与 用 法 </h3> 
<p>article 标签 定义 外 部 的 内 容 ， 外 部 内 容 可 以 是 来 自 外 部 的 新 闻 提 供 者 的 一 篇 新 的 文章 ， 或 是 来 自 博 
客 的 文本 ， 或 是 来 自 论坛 的 文本 。 抑 或 来 自 其 他 外 部 源 内 容 。 
<p> 
<jarticle> 
<Jbody> 


4. aside 标签 


aside 标签 用 来 定义 当前 页 面 或 文章 的 附属 信息 部 分 。 

aside 元 素 的 用 法 主要 有 两 种 :一 种 是 被 包含 在 article 元 素 中 作为 主要 内 容 的 附属 信息 部 分 ， 
其 中 的 内 容 可 以 是 与 当前 文章 有 关 的 资料 、 名 词 解释 等 ， 另 一 种 是 在 article 元 素 之 外 用 作 页 面 
或 站 点 全 局 的 附属 信息 部 分 。 最 典型 的 是 侧 边栏 ， 其 中 的 内 容 可 以 是 友情 链接 ， 博 客 中 的 其 他 
文章 列表 、 广 告 单元 等 。 


5. section 标签 


section 标签 用 于 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 进 行 分 块 ，section 元 素 通常 由 内 容 和 标 
题 组 成 。section 最 好 藤 套 在 article 中 使 用 。 
section 元 素 并 非 普通 的 容器 元 素 ， 当 容器 需要 被 直接 定义 样式 或 通过 脚本 定义 行为 时 ， 推 
荐 使 用 div。 
如 果 article 元 素 、aside 元 素 或 nav 元 素 更 符合 使 用 条 件 , 那么 不 要 使 用 section 元 素 。 另 外 ， 
没有 标题 的 内 容 区 块 不 要 使 用 section 元 素 定 义 。 
下 面 通过 案例 对 article、aside 和 section 标签 的 用 法 进行 演示 。 
【 例 7-1-3] 使 用 article、aside 和 section 标签 设计 显示 文章 内 容 的 局 部 页 面 ， 本 例文 件 在 浏 
览 器 中 的 显示 效果 如 图 7-3 所 示 ， 页 面 代码 如 下 ，CSS 样式 定义 请 参考 配套 源码 。 
<body> 
<article id="con'> 
<section > 
<hl> 标 题 <hl> 
<p> 文 章 主要 内 容 <br><br><br><br><br></p> 
</section> 
<aside id="ad1"> 其 他 相关 文章 </aside> 
</article> 
<aside id="ad2"> 右 侧 菜单 <br/><br/><br/><br><br/><br/><br/><br/><br/></aside> 
<body> 
【说 明 】 上 述 代码 中 定义 了 两 个 aside 元 素 ， 其 中 第 1 个 aside 元 素 位 于 article 元 素 中 ， 用 
于 添加 文章 的 其 他 相关 信息 ， 第 2 个 aside 元 素 用 于 定义 页 面 的 侧 边栏 内 容 。 
在 HIML5 中 ，article 元 素 可 以 看 作 一 种 特殊 的 section 元 素 ， 它 比 section 元 素 更 具 独 立 性 ， 即 
section 元 素 强 调 分 段 或 分 块 ， 而 article 元 素 强 调 独立 性 。 如 果 一 块 内 容 相 对 来 说 比较 独立 ， 应 该 
使 用 article 元 素 ; 但 是 如 果 想 要 将 一 块 内 容 分 成 多 段 ， 应 该 使 用 section 元 素 。 
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标题 
文章 主要 内 容 


图 7-3 使 用 aside 标签 的 效果 


6. footer 标签 


footer 标 签 用 于 定义 页 面 或 区 域 的 底部 , 可 以 包含 所 有 通常 放 在 页 面 底部 的 内 容 。 在 HIML5 
开发 中 使 用 footer 标签 时 ， 把 它 当 作 普通 div 标签 对 待 即 可 ， 只 不 过 它 一 般 用 于 网 站 底部 布局 。 


一 个 页 面 中 可 以 包含 多 个 footer 元 素 , 但 最 好 只 使 用 一 个 footer 元 素 。 另 外 ， 
元 素 或 section 元 素 中 添加 footer 元 素 。 


7. figure 和 figcaption 标签 


也 可 以 在 article 


在 HIML5 中 ，figure 标签 用 于 定义 独立 的 流 内 容 (图 像 、 图 表 、 照 片 和 代码 等 )， 一 般 指 一 
个 单独 的 单元 。figure 元 素 的 内 容 应 该 与 主 内 容 相 关 ， 但 如 果 被 删除 ， 也 不 会 对 文档 流产 生 影 
响 。figcaption 标 签 用 于 为 figure 元 素 组 添加 标题 ,一 个 figure 元 素 内 最 多 允许 使 用 一 个 figcaption 


元 素 ， 该 元 素 应 该 放 在 figure 元 素 的 第 一 个 或 最 后 一 个 子 元 素 的 位 置 。 


【 例 7-1-4】figure 和 figcaption 标签 的 用 法 。 本 例文 件 在 浏览 器 中 的 显示 效果 如 图 7-4 所 示 ， 


页 面 文件 7-1-4.html 的 关键 代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title> 新 闻 详 情 页 面 </title> 
<style> 
body{ 证 设置 页 面 的 整体 样式 */ 
font-family: "微软 雅 黑 ":。 ”上 * 字 体 为 "微软 雅 黑 "*/ 
font-size:13px: 请 文字 大 小 为 13px*/ 
color#333: 片 文字 颜色 为 灰色 */ 
} 
hgroup{ 上 分 组 标题 的 样式 */ 
text-align: center: 
} 
h4{ 
font-size: 14px: 
font-weight:600 : 
margin:10px 0: 
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} 
hs{ 
font-size: 13px: 
font-weight:500 : 
color: #999: 
margin: 10px 0; 
} 
figure{ 证 设置 标签 figure 的 样式 */ 
margin: 15px 30pX: 
} 
</style> 
</head> 
<body> 
<hgroup> 
<h4> 上 海 国际 汽车 灯具 展 2018: ADB 智能 LED 头 灯 兴起 </h4> 
<h5>2018-03-30 12:33 </h5> 
</hgroup> 
<p> 第 四 届 上 海 国际 汽车 灯具 展览 会 (ALE) 于 2018 年 3 月 28-29 日 在 上 海 汽车 会 展 中 心 成 功 举办 。 根 据 
集 邦 咨询 LED 研究 中 心 (LEDinside) 统 计 ， 共 有 约 180 家 汽车 灯具 产业 厂商 参展 ， 圳 括 驱动 IC、 封 装 、 
模块 、 车 灯 等 领域 。</p> 


<figcaption> 因 应 智慧 汽车 概念 ，ADB 智能 LED 头 灯 系统 发 展 迅速 </figcaption> 
<img ste="img/led _inside.jpg"/> 
<p>OSRAM 展 出 多 种 ADB 模块 及 灯具 ， 以 及 使 用 单 颗 高 像素 LED 打造 的 HAFS 车 灯 。</p> 
</figure> 
<p> 随 着 LED 器 件 的 渗透 率 提高 和 智慧 汽车 概念 的 普及 ， 多 家 厂商 推出 搭配 ADB 系统 的 LED 车 灯 ， 
集成 摄影 头 ， 可 检测 到 其 他 车 辆 或 障碍 ， 控 制 LED 并 形成 多 个 阴影 区 ， 以 防止 眩光 。</p> 


CG | © file///E/AladLed/chapter07/7-1-4.html 


上 海 国际 汽车 灯具 展 2018 : ADB 智 能 LED 头 灯 兴 起 


第 四 届 上 海 国际 汽车 灯 愉 展 汪 会 (ALE ] 于 2018 年 3 月 28-29 昌 在 十 心 成 功 学 力 。 根据 生 于 客 词 LED 研 究 中 
只 产业 厂商 参展 , 完 括 儿 动 K、 封 苇 ， 柚 块 、 车 灯 笑 托 


心 (LEDinside ) 统计 ， 共 有 约 18 


因应 本 下 汽 夺 民 S 。ADP 久 能 | FD XJ 到 流 必 展 二 应 


用 单亲 训 全 素 LED 林 愉 99bAFS 车 灯 . 
商 推 出 档 醒 ADB 系 统 的 LED 车 灯 ， 壬 成 入 党 头 ， 可 检测 到 闪 他 


7-4 ”figure 元素 和 figcaption 元 素 效果 展示 
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【说 明 】figcaption 标签 用 来 定义 文章 的 标题 。 
hgroup 标签 用 于 将 多 个 标题 ( 主 标题 和 副标题 或 子 标题 ) 组 成 一 个 标题 组 ， 通 常 它 与 hl~h6 
元 素 组 合 使 用 。 


浮动 与 定位 


7.2.1 案例 分 析 


【案例 展示 】 爱 德 照明 网 站 首页 的 整体 布局 结构 设计 。 
用 盒子 模型 的 定位 与 浮动 知识 设计 爱 德 照明 网 站 的 首页 整体 布局 结构 ， 本 例文 件 7-2.html 
在 浏览 器 中 的 显示 效果 如 图 7-5 所 示 。 


I 
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图 7-5 ” 爱 德 照明 网 站 的 首页 整体 布局 结构 


【知识 要 点 】 定 位 属性 、 定 位 方式 、 浮 动 与 清除 浮动 。 
【学 习 目标 】 掌 握 使 用 盒子 模型 的 定位 与 浮动 知识 实现 各 种 排版 需求 。 


7.2.2 元 素 的 浮动 


浮动 (floa0) 是 使 用 率 较 高 的 一 种 定位 方式 。 浮动 元 素 可 以 向 左 或 向 右 移动 , 直到 它 的 外 边 距 
边缘 碰 到 包含 块 的 内 边 距 边缘 或 男 一 个 浮动 元 素 的 外 边 距 边缘 为 止 。 任 何 元 素 都 可 以 浮动 ， 用 
float 属性 可 定义 元 素 向 哪个 方向 浮动 。 

语法 : float : none | left | right 

参数 如 下 。 

e@ none: 对 象 不 浮动 。 

e left: 对 象 浮 在 左边 。 

e@ right: 对 象 浮 在 右边 。 

说 明 : float 属性 的 值 指出 对 象 是 否 浮动 及 如 何 浮动 。 
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【 例 7-2-1】 向 右 浮动 元 素 。 本 例文 件 中 页 面 布局 的 初始 状态 如 图 7-6 所 示 ， 
右 浮动 后 的 结果 如 图 7-7 所 示 。 页 面 文件 7-2-1.html 的 关键 代码 如 下 所 示 。 


<head> 
<title> 向 右 浮动 </tide> 
<style type="text/css"> 
body{ 

margin: 15px; 


font-family: Arial; font-size:12px: 


} 


father{ 让 设置 容器 的 样式 */ 
backeground-color-#fFFF99; 
border:1px solid #111111; 
padding:Spx: 

‘father div{ 大 设置 容器 中 div 标签 的 样式 */ 
Padding: 10px; 
margin: 15px; 
border:1px dashed #111111:; 
background-color#90ba 任 
} 

father p{ 店 设 置 容 器 中 段落 的 样式 */ 
border:1px dashed #111111:; 
background-color:#ff90ba: 
} 

.son_one{ 
width:100px: 片 设置 元 素 的 宽度 */ 
height:100px: 证 设置 元 素 的 高 度 */ 
floatright: 证 向 右 浮动 */ 

} 

‘Son_two{ 
width:100px: 片 设置 元 素 的 宽度 */ 
height:100px: 刻 设 置 元 素 的 高 度 */ 

} 

.Son three{ 
width:100px: 上 # 设 置 元 素 的 宽度 所 
height:100px: 证 设置 元 素 的 高 度 */ 

} 

</style> 

</head> 

<body> 
<div class="father"> 


<div class="son_one"> 盒 子 1</div> 

<div class="son_two"> 盒 子 2</div> 

<div class="son_three"> 盒 子 3</div> 
<p> 浮 动 的 框 可 以 向 左 或 向 右 移动 ， 直 到 它 的 外 边缘 碰 到 包含 框 或 男 一 个 浮动 框 的 边框 为 止 。 由 于 浮动 


框 不 在 文档 的 普通 流 中 ， 因 此 文档 的 普通 流 中 的 块 框 表现 得 就 像 浮动 框 不 存在 一 样 。 
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图 7-6 没有 浮动 的 初始 状态 图 7-7 “盒子 1” 向 右 浮动 后 的 效果 


【说 明 】 本 例 中 首先 定义 了 一 个 类 名 为 .father 的 父 容器 ,然后 在 其 内 部 又 定义 了 3 个 并 列 关 
系 的 div 容器 。 当 给 其 中 类 名 为 .son_one 的 div(“ 盒 子 1”) 增 加 “foatright ”属性 后 ，“ 盒 子 1” 
便 脱 离 文档 流向 右 移动 ， 直 到 它 的 右边 缘 碰 到 包含 框 的 右边 缘 。 

【 例 7-2-2】 向 左 浮动 元 素 。 修 改 例 7-2-1 中 的 CSS 样式 ， 首 先 将 “盒子 1” 向 左 浮动 ， 页 
面 7-2-2.html 的 布局 如 图 7-8 所 示 。 

修改 “盒子 1” 的 CSS 定义 ， 实 现 “ 盒 子 1” 向 左 浮动 ， 代 码 如 下 。 

.son_one{ 

width:100px: 庆 设 置 元 素 的 宽度 所 
height:100px: 片 设置 元 素 的 高 度 */ 
float:left: 此 向 左 浮动 */ 

} 

然后 所 有 元 素 向 左 浮动 ， 本 例 中 的 所 有 元 素 向 左 浮动 ， 页 面 的 布局 效果 如 图 7-9 所 示 。 实 
现 “ 盒 子 1”“ 盒 子 2”“ 盒 子 3” 向 左 浮动 ， 在 CSS 样式 中 ， 增 加 样式 定义 代码 如 下 。 

.son_one..son two..son three{ ”+ 三 个 盒子 的 样式 */ 

floatleft: 族 向 左 浮动 */ 

【说 明 】 本 例 中 如 果 只 将 “盒子 1” 向 左 浮动 ， 该 元 素 会 脱离 文档 流向 左 移动 ， 直 到 它 的 左 
边缘 碰 到 包含 框 的 左边 缘 ， 如 图 7-8 所 示 。 由 于 “盒子 1” 不 再 处 于 文档 流 中 ， 因 此 它 不 占据 
空间 ， 实 际 上 覆盖 在 “盒子 2” 上 ， 把 “盒子 2” 中 的 内 容 挤 了 出 来 。 
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图 7-8 单个 元 素 向 左 浮动 图 7-9 ”所 有 元 素 向 左 浮动 


在 三 个 盒子 都 设置 了 向 左 浮动 属性 后 ，“ 盒 子 1” 向 左 浮动 直到 碰 到 左边 框 时 静止 ， 另 外 
两 个 盒子 也 向 左 浮动 ， 直 到 碰 到 前 一 个 浮动 框 也 静止 ， 如 图 7-12 所 示 ， 这 样 就 将 纵向 排列 的 
div 容器 变 成 了 横向 排列 。 

【 例 7-2-3】 父 容器 空间 不 够 时 的 元 素 浮动 。 

修改 例 7-2-2， 将 类 名 为 father 的 父 容器 的 宽度 设置 为 300px， 此 时 无 法 容纳 3 个 浮动 元 素 
“盒子 1”“ 盒 子 2”“ 盒 子 3” 并 排放 置 ，“ 盒 子 3” 将 会 向 下 移动 ， 直 到 有 足够 的 空间 放置 ， 
本 例 的 页 面 布 局 效果 如 图 7-10 所 示 。 

为 了 看 清 盒子 之 间 的 排列 关系 ， 去 掉 父 容器 中 段落 的 样式 定义 及 结构 代码 。 

修改 类 名 为 .father 的 父 容器 的 样式 定义 ， 修 改 后 的 CSS 定义 代码 如 下 

father{ * 设 置 容器 的 样式 */ 

background-colorf#ffttfg9: 

borderlpx solid #111111: 

Padding:Spx; 

width:330px; ”* 父 容器 的 宽度 不 够 ， 导 臻 浮动 元 素 “盒子 3” 向 下 移动 */ 
fioatleft ”人 * 向 左 浮动 */ 

} 


图 7-10 父 容器 宽度 不 够 时 的 状态 


当 父 容器 空间 不 够 且 浮动 元 素 的 高 度 彼 此 不 同时 ， 它 们 在 向 下 移动 后 可 能 会 被 其 他 浮动 元 
素 “ 挡 住 ”。 
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【 例 7-2-4】 父 容器 空间 不 够 、 浮 动 元 素 的 高 度 彼此 不 同 的 情况 。 本 例 的 页 面 布局 效果 如 
图 7-11 所 示 。 
修改 例 7-2-3 中 “盒子 1” 的 高 度 ， 修 改 后 的 CSS 样式 代码 如 下 。 
‘son_one{ 
width:100px; 。”* 设 置 元 素 的 宽度 */ 
height:140px: 。”/* 设 置 元 素 的 高 度 */ 
float:left: 片 向 左 浮动 */ 
} 
【说 明 】 浮 动 元 素 的 高 度 不 同 ， 导 臻 “盒子 3” 向 下 移动 时 被 “盒子 1”“ 挡 住 ”。 


图 7-11 父 容 器 宽度 不 够 且 浮动 元 素 高 度 不 同时 的 布局 效果 


7.2.3 ”清除 浮动 

浮动 盒子 不 属于 文档 流 中 的 标准 流 。 当 元 素 浮动 之 后 ， 就 会 脱离 标准 文档 流 ， 漂 浮 在 标准 
流 的 上 面 , 不 再 占据 标准 文档 流 中 的 空间 。 这 时 文档 中 的 标准 流 就 会 占据 浮动 元 素 原 来 的 位 置 ， 
导致 页 面 出 现 错位 。 

另外 ， 在 进行 页 面 布局 时 ， 当 容器 的 高 度 设置 为 auto 且 容 器 的 内 容 中 有 浮动 元 素 时 ， 容 器 
的 高 度 不 能 自动 伸 长 以 适应 内 容 的 高 度 , 这 也 会 使 得 内 容 溢出 到 容器 之 外 而 导致 页 面 出 现 错位 ， 
这 种 现象 称 为 浮动 溢出 。 

为 了 防止 因 元 素 浮动 导致 的 错位 现象 ， 需 要 进行 清除 浮动 处 理 。 

语法 : clear : none | left | right | both 

参数 如 下 。 

e@ none: 允许 两 边 都 可 以 有 浮动 对 象 。 

e@ both: 不 允许 有 浮动 对 象 。 

@ left: 不 允许 左边 有 浮动 对 象 。 

e right: 不 允许 右边 有 浮动 对 象 。 

【 例 7-2-5】 清 除 浮动 示例 。 在 例 7-2-2 中 ， 将 “盒子 1”“ 盒 子 2”“ 盒 子 3” 设 置 为 向 左 
浮动 后 ， 未 清除 浮动 时 的 段落 文字 便 填 充 在 “盒子 3” 后 面 的 空隙 中 ， 如 图 7-9 所 示 。 修 改 例 
7-2-2， 对 段落 <p> 设 置 清除 浮动 ， 本 例 的 页 面 布局 效果 如 图 7-12 所 示 。 

设置 段落 样式 中 清除 浮动 的 CSS 代码 如 下 : 
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father p{ 店 设 置 容器 中 段落 的 样式 */ 
border:1px dashed #111111: 
backeround-color-#ff90ba: 
clearboth: 

上 


图 7-12 对 <p> 清 除 浮动 后 的 状态 


【说 明 】 在 对 段落 设置 了 “clearboth: ”清除 浮动 后 ， 可 以 将 段落 之 前 的 浮动 全 部 清除 ， 使 
段落 按照 正常 的 文档 流 显示 。 


7.2.4 定位 属性 

制作 网 页 时 ， 如 果 希 望 元 素 出 现在 某 个 特定 的 位 置 ， 就 需要 使 用 定位 属性 对 元 素 进行 精确 
定位 。 元 素 的 定位 就 是 将 元 素 放置 在 页 面 的 指定 位 置 ， 主 要 包括 定位 模式 和 边 偏 移 两 部 分 。 

1. 定位 模式 

在 CSS 中 ，position 属性 用 于 定义 元 素 的 定位 模式 ， 基 本 语法 格式 如 下 。 

Position : static | relative | absolute | fixed 


参数 如 下 。 

e static: 默认 值 。 没 有 定位 ， 元 素 出 现在 正常 的 流 中 。 

e relative: 相对 定位 ， 相 对 于 原文 档 流 的 位 置 进行 定位 。 

e absolute: 绝对 定位 ， 相 对 于 上 一 个 已 经 定位 的 父 元 素 进行 定位 。 
e fixed: 固定 定位 ， 相 对 于 浏览 器 窗口 进行 定位 。 


2. 边 偏 移 


定位 (position) 模 式 仅仅 用 于 定义 元 素 以 哪 种 方式 定位 , 并 不 能 确定 元 素 的 具体 位 置 ,在 CSS 
中 ， 通 过 边 偏 移 属性 ttp、bottom、lef 或 right 来 精确 定义 定位 元 素 的 位 置 ， 对 这 些 属性 的 具体 
解释 如 表 7-1 所 示 。 


表 7-1 边 偏 移 设置 方式 


边 偏 移 属性 描 述 
top ， 定 义 元 素 相 对 于 父 元 素 上 边线 的 距离 
bottom ， 定 义 元 素 相 对 于 父 元 素 下 边线 的 距离 
left ， 定 义 元 素 相 对 于 父 元 素 左边 线 的 距离 
right ， 定 义 元 素 相对 于 父 元 素 右边 线 的 距离 
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从 表 7-1 可 以 看 出 ， 边 偏 移 可 以 通过 top、bottom、left 和 right 属性 进行 设置 ， 取 值 可 以 是 
像素 值 或 百分比 ， 示 例如 下 。 


position:relative; 。 ”人 * 相 对 定位 */ 
left:S0px: /# 距 左边 线 50px*/ 
top:30px: 目 距 顶部 边线 30px*/ 


7.2.5 ”定位 方式 


1. 静态 (static) 定 位 


静态 定位 是 元 素 的 默认 定位 方式 ， 当 position 属性 的 取 值 为 static 时 ， 可 以 将 元 素 定位 于 
静态 位 置 。 所 谓 静态 位 置 ， 就 是 各 个 元 素 在 HTML 文档 流 中 默认 的 位 置 。 

任何 元 素 在 默认 状态 下 都 会 以 静态 定位 方式 来 确定 自己 的 位 置 ， 所 以 当 没有 定义 position 
属性 时 ， 并 不 说 明 元 素 没 有 自己 的 位 置 , 而 是 遵循 默认 值 显示 在 静态 位 置 。 在 静态 定位 状态 下 ， 
无 法 通过 边 偏 移 属性 top、bottom、left 或 righb 来 改变 元 素 的 位 置 。 

【 例 7-2-6】 静 态 定 位 示例 。 如 图 7-13 所 示 ， 元 素 在 自己 本 来 的 位 置 ， 页 面 文件 7-2-6.html 
的 代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title> 元 素 的 静态 定位 </title> 
<style type="text/css"> 
father{ 
width:300px; 
height:200px: 
background:#ccce; 
border: 1px solid #000: 
margin: 10px auto: 
padding:Spx: 
} 
.child01. .child02{ 
width:100px: 
height:5Opx: 
background:#ff0: 
border: 1px solid #000: 
} 
.child01{ 
position:static; 让 静态 定位 */ 
} 
</style> 
</head> 
<body> 
<div class="father"> 
<div class"child01"> 我 静态 定位 </div> 
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<div class="child02"> 我 没有 定位 </div> 
Adiv> 


<Jbody> 
</html> 


2. 相对 (relative) 定 位 


相对 定位 是 将 元 素 相对 于 本 身 的 位 置 进 行 定位 。 对 元 素 设置 相对 定位 后 ， 可 以 通过 边 偏 移 
属性 来 改变 元 素 的 位 置 ， 但 是 它 在 文档 流 中 的 位 置 仍然 保留 。 

【 例 7-2-7】 相 对 定位 示例 。 修 改 例 7-2-6， 让 第 一 个 div 向 本 身 的 右 下 方 移动 。 本 例 的 显示 
效果 如 图 7-14 所 示 ， 修 改 后 的 代码 如 下 。 


child01{ 
position:relative; 证 相 对 定位 */ 
left:150px: /# 距 左边 线 150px*/ 
top:100px: 证 距 顶 部 边线 100px*/ 
} 


通过 . child01 样式 对 第 一 个 div 设置 相对 定位 后 , 让 它 相 对 于 自身 的 默认 位 置 进行 偏 移 ， 向 
右 偏 移 1530px， 向 下 偏 移 100px。 


ala 


C | © 127.00.1:8020/Aladle. 


图 7-13 静态 定位 图 7-14 相对 定位 
3. 绝对 (absolute) 定 位 
绝对 定位 是 将 元 素 依据 最 近 的 已 经 定位 (绝对 、 固 定 或 相对 定位 ) 的 父 元 素 进行 定位 ， 若 所 
有 父 元 素 都 没有 定位 ， 则 依据 body 根 元 素 (浏览 器 窗口 ) 进 行 定位 。 
【 例 7-2-8】 绝 对 定位 示例 ， 修 改 例 7-2-7， 将 . child01 的 定位 模式 设置 为 绝对 定位 ， 将 代码 
更 改 为 如 下 所 示 。 


© | © 127.00.18020/Aladle. 


.childo1{ 
position:absolute: 启 绝 对 定位 */ 
left:150px: /# 距 左边 线 150px*/ 
top:100px: /# 距 顶部 边线 100px*/ 


} 
保存 HTML 文件 7-2-8.html， 刷 新 页 面 ， 效 果 如 图 7-15 所 示 。 
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7-15 绝对 定位 效果 


在 图 7-15 中 ， 设 置 为 绝对 定位 的 元 素 childo1， 依 据 浏览 器 窗口 进行 定位 。 这 时 child02 占 
据 child01 的 位 置 ， 即 child01 脱离 标准 文档 流 的 控制 ， 不 再 占据 标准 文档 流 中 的 空间 。 
当 改变 浏览 器 的 大 小 时 ， 绝 对 定位 的 元 素 child01 会 随 着 浏览 器 的 大 小 变化 而 移动 位 置 。 
在 网 页 设计 中 ， 一 般 需 要 子 元 素 相对 于 直接 父 元 素 的 位 置 保持 不 变 ， 即 子 元 素 依据 直接 父 
元 素 绝对 定位 。 这 种 情况 下 ， 可 将 直接 父 元 素 设置 为 相对 定位 ， 但 不 对 其 设置 偏 移 量 ， 然 后 再 
对 子 元 素 应 用 绝对 定位 ， 并 通过 偏 移 属性 对 其 进行 精确 定位 。 这 样 父 元素 既 不 会 失去 其 空间 ， 
同时 还 能 保证 子 元 素 依据 直接 父 元 素 而 准确 定位 。 
【 例 7-2-9】 绝 对 定位 示例 。 修 改 例 7-2-8， 对 father 进行 相对 定位 ， 绝 对 定位 的 child01 会 
依据 直接 父 元 素 father 进行 绝对 定位 ， 本 例 的 显示 效果 如 图 7-16 所 示 。 修 改 后 的 代码 如 下 。 
father{ 
width:300px; 
height:200px: 
background:#cce: 
border: 1px solid #000; 
margin: 10px auto; 
Ppadding:5px: 
position: relative: 
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7-16 绝对 定位 效果 
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【说 明 】 对 父 元 素 设置 相对 定位 ， 但 不 对 其 设置 偏 移 量 。 同 时 ， 对 子 元 素 child01 设置 绝对 
定位 ， 并 通过 偏 移 属性 对 其 进行 精确 定位 。 子 元 素 相对 于 父 元 素 进行 偏 移 ， 当 缩放 浏览 器 的 窗 
口 时 ， 子 元 素 相 对 于 直接 父 元 素 的 位 置 保持 不 变 。 


注意 : 
定义 多 个 边 偏 移 属性 时 ， 如 果 left 和 right 相 冲突 ， 则 以 left 为 准 ; 如 果 top 和 bottom 相 冲 
突 ， 则 以 top 为 准 。 


4. 固定 (fxed) 定 位 


固定 定位 是 绝对 定位 的 一 种 特殊 形式 ， 以 浏览 器 窗口 作为 参照 物 来 定义 网 页 元 素 。 

当 对 元 素 设置 固定 定位 后 ， 元 素 将 脱离 标准 文档 流 的 控制 ， 始 终 依据 浏览 器 窗口 来 定义 自 
己 的 显示 位 置 。 不 管 滚动 条 如 何 滚动 ， 也 不 管 浏览 器 窗口 的 大 小 如 何 变化 ， 元 素 都 会 始终 显示 
在 浏览 器 窗口 的 固定 位 置 。 

【 例 7-2-10】 固定 定位 示例 。 修 改 例 7-2-8， 将 child01 的 定位 模式 设置 为 固定 定位 ， 更 改 
代码 为 如 下 所 示 。 


childolf 
position:fixed; 族 固 定 定位 */ 
left:10px: 让 距 浏览 器 左 侧 10px*/ 
top:100px: 让 距 浏览 器 顶部 100px*/ 


} 
浏览 网 页 7-2-10.html， 效 果 如 图 7-17 所 示 。 当 改变 浏览 器 的 大 小 时 ，child01 的 位 置 不 变 。 
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图 7-17 固定 定位 效果 


5. z-index( 层 又 等 级 属性 ) 


当 对 多 个 元 素 同时 设置 定位 时 ， 定 位 元 素 之 间 有 可 能 会 发 生 重 炙 现象 ， 如 图 7-17 所 示 。 

在 CSS 中 ， 要 想 调整 重 辣 定位 元 素 的 堆 合 顺序 ， 可 以 对 定位 元 素 应 用 z-index 层 合 等 级 属 
性 ， 取 值 可 为 正 整数 、 负 整数 和 0。z-index 的 默认 属性 值 是 0， 取 值 越 大 ， 定 位 元 素 在 层 登 元 
素 中 就 越 居 上 。 
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7.2.6 ”overflow 属性 


overflow 属性 是 CSS 中 的 重要 属性 。 当 盒子 内 的 元 素 超出 盒子 自身 的 大 小 时 ， 内 容 就 会 游 
出 。 如 果 想 要 规范 溢出 内 容 的 显示 方式 ， 就 需要 使 用 overflow 属性 ， 基 本 语法 格式 如 下 。 
overflow : visible | hidden | auto | scroll 
参数 如 下 。 
e visible: 溢出 内 容 不 会 被 修剪 ， 呈 现在 元 素 框 之 外 (默认 值 )。 
e hidden: 溢出 内 容 会 被 修剪 ， 并 且 被 修剪 的 内 容 是 不 可 见 的 。 
e auto: 在 需要 时 产生 滚动 条 ， 即 自 适 应 所 要 显示 的 内 容 。 
e scroll: 游 出 内 容 会 被 修剪 ， 并 且 浏 览 器 会 始终 显示 滚动 条 。 
【 例 7-2-11】overflow 属性 示例 。 本 例 在 浏览 器 中 的 显示 效果 如 图 7-18 所 示 ， 页 面 文件 
7-2-11.html 的 关键 代码 如 下 。 
<head> 
<meta charset="utf-8"> 
<title>overflow 属性 1</title> 
<style type="text/css"> 
div{ 


border: 1px solid #000000: 
overflow:visible; 让 溢出 内 容 呈 现在 元 素 框 之 外 */ 
} 
</style> 
</head> 
<body> 
<div> 
当 盒子 内 的 元 素 超出 盒子 自身 的 大 小 时 ， 内 容 就 会 溢出 ， 如 果 想 要 规范 溢出 内 容 的 显示 方式 ， 就 需要 使 
用 overflow 属性 ， 它 用 于 规范 元 素 中 滋 出 内 容 的 显示 方式 。 
</div> 
<body> 
【说 明 】 在 例 7-2-11 中 ， 通 过 “overflow:visible;” 样 式 ， 定 义 溢出 的 内 容 不 会 被 修剪 ， 而 呈 
现在 元 素 框 之 外 。 一 般 而 言 ， 并 没有 必要 设 定 overflow 的 属性 为 visible， 除 非 想 覆 盖 它 在 其 他 
地 方 设 定 的 值 。 
如 果 希 望 涝 出 的 内 容 被 修剪 ， 且 不 可 见 ， 可 将 overflow 属性 的 值 定义 为 hidden。 修 改 例 
7-2-11， 将 代码 更 改 为 :overflow: hidden: /* 溢 出 内 容 被 修剪 ， 且 不 可 见 */。 保 存 HTML 文件 为 
7-2-12.html， 刷 新 页 面 ， 效 果 将 如 图 7-19 所 示 。 
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图 7-18 定义 “overflow:visible” 效 ; 7-19 定义 “overflow: hidden” 效 果 


如 果 和 希望 元 素 框 能 够 自 适应 内 容 的 多 少 , 在 内 容 溢出 时 ,产生 滚动 条 ， 和 否则 ,不 产生 滚动 条 ， 
可 以 将 overflow 属 性 的 值 定义 为 auto。 修 改 例 7-2-11， 将 代码 更 改 为 ，overflow:auto; * 根 据 需要 产 
生 滚 动 条 %。 保 存 HTML 文件 为 7-2-13html， 刷 新 页 面 ， 效 果 将 如 图 7-20 所 示 。 元 素 框 的 右 侧 产 生 
了 滚动 条 ， 拖 动 滚动 条 即 可 查看 溢出 的 内 容 。 当 盒子 中 的 内 容 减少 时 ， 滚 动 条 就 会 消失 。 

当 定 义 overflow 属性 的 值 为 scroll 时 , 元 素 框 中 会 始终 存在 滚动 条 。 接 下 来 , 修改 例 7-2-11， 
将 代码 更 改 为 : overflow:scroll/* 始 终 显示 滚动 条 拟 。 保存 HTML 文件 为 7-2-14.html, 刷新 页 面 ， 
效果 将 如 图 7-21 所 示 。 在 图 7-21 中 ， 元 素 框 中 出 现 了 水 平和 垂直 方向 的 滚动 条 。 与 
“overflow:auto;” 不 同 ， 当 定义 “overflow:scroll; ”时 ， 不 论 元 素 是 否 溢出 ， 元 素 框 中 水 平和 垂 
直方 向 的 滚动 条 始终 都 存在 。 


(es) es 
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图 7-20 定义 “overflow:auto” 
7.2.7 “案例 制作 
制作 完成 爱 德 照明 网 站 的 首页 整体 布局 结构 。 
1. 布局 规划 


爱 德 照明 网 站 的 整体 结构 分 成 头 部 、 导 航 、 页 面 主体 和 页 脚 四 部 分 ， 自 上 向 下 排列 。 头 部 通 
过 <header> 标 签 定义 ， 导 航 链接 由 <nav> 元 素 定义 ， 主 体内 容 由 <div id="content"> 标 签 定义 ， 
页 面 的 底部 区 域 由 <footer> 标 签 定义 。 其 中 ， 在 id- "content" 的 盒子 中 又 嵌 套 了 两 个 盒子 ， 分 别 


图 7-21 定义 “overflow:scroll” 效 果 
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是 id="hotproduct "和 id="main" 的 两 个 div, 而 在 id= "main" 的 盒子 中 又 嵌 套 了 三 个 自 左 而 右 排列 
的 盒子 。 


另外 ， 首 页 上 还 有 固定 显示 的 在 线 咨询 。 


2. 网 页 结构 文件 


在 当前 文件 夹 中 ， 新 建 一 个 名 为 7-2.html 的 网 页 文件 ， 代 码 如 下 。 


<head> 
<meta charset="utf-8"> 


<tile> 网 站 首页 整体 布局 </title> 
<link href="css/7-2.css" type="text/css" rel="stylesheet" > 


</head> 

<body> 
<header> 头 部 </header> 
<navy> 导 航 </nav> 
<div id="content"> 


<div id="hotproduct"> 热 销 产品 <br/><br/><br/></div> 


<div id="main"> 


<div class="main left"> 主体 左 侧 </div> 
<div class="main_center"> 主 体 中 间 </div> 
<div class="main_right"> 主 体 右 侧 <Jdiv> 


</div> 
</div> 
<footer> 页 脚 </footer> 
<div class="online_zx"> 在 线 咨询 </div> 
<body> 
3. 外 部 样式 表 
在 文件 夹 css 下 新 建 一 个 名 为 7-2.css 的 样式 表 文 件 ， 代 码 如 下 。 
证 针对 所 有 的 HTML 元 素 定义 样式 */ 
margin:Opx; 上 # 外 边 距 为 1px*/ 
Padding:0; 店内 边 距 为 Opx*/ 
box-sizing:border-box 人 # 盒 子 的 宽度 值 和 高 度 值 包含 元 素 的 内 边 距 和 边框 所 
} 
body{ 族 设 置 页 面 的 整体 样式 */ 
width:1050px 放宽 度 1050px*/ 
margin:0 auto: 人 # 页 面 自动 居中 对 齐 六 
header{ 人 # 头 部 样式 所 
height:80px: 上 # 高 度 为 80px*/ 
background-color#99FFFF: ”背景 颜色 */ 
} 
nav{ 族 导 航 栏 样式 */ 
height:36px: 


backeround-color-#90BAFF: 
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刻 网 页 中 部 内 容 样式 */ 

#content{ 
height:auto; 此 自 动 默认 高 度 */ 
backeround-color: #008B8B: 

} 

#content #hotproduct{ 证 首页 中 部 - 热 销 产品 样式 */ 
height:auto; 
backeround-color-#FFCCO0: 


b 
店 首 页 中 部 -主体 部 分 样式 */ 
#content #main{ 
clear: both: /4* 清 除 两 侧 浮动 */ 
height:300px:; 
上 
让 定义 主体 部 分 的 左 、 中 、 右 三 块 */ 
#main .main left#main .main center.#main main right{ 
margin:3px Opx; 
height:295px; 
position:relative; 让 相对 定位 */ 
#main main left{ 
width:307px; 
float:left: 店 向 左 浮动 */ 
background-color#EFFF00: 
} 
#main .main_center{ 
width:390px: 
float:left: 证 向 左 浮动 */ 
background-color#84F14D: 
mnain main Tight{ 
width:350px: 
floatright: 刻 向 右 浮动 */ 
background-color#99CCFF: 
footer{ 全 footer 样式 */ 
clear:both: 让 清除 两 侧 浮动 */ 
height:S0px: 
background:#AAAAAA;: 
: 
.online zx{ 让 在 线 咨询 样式 */ 
width:100px: 
height80px: 
Pposition:fixed: 
top:30px; 
Tight: 10px: 
background-color#OOFFFF: 
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4. 浏览 网 页 

在 浏览 器 中 浏览 制作 完成 的 页 面 ， 页 面 的 显示 效果 如 图 7-5 所 示 。 

【案例 说 明 】 (1) 页 面 主体 宽度 为 1050px， 其 中 的 main left、-main_center 和 .main right 
三 个 div， 自 左 而 右 在 一 行 上 排列 。.main_left 和 main center 设置 向 左 浮动 ，main right 设置 向 
右 浮动 ， 三 个 div 总 宽度 为 1047px， 在 .main_center 和 .main right 中 间 留 下 3px 的 空 阶 ， 防 止 出 
现 bug 造成 页 面 布局 错位 .(2) 对 于 页 脚 盒子 footer, 必须 设置 clearboth: 属 性 , 否则 会 出 现 footer 
被 其 他 div 遮挡 住 的 现象 。 


典型 的 CSS 布局 


网 页 设计 师 为 了 让 页 面 外 观 与 结构 分 离 ， 会 使 用 CSS 样式 来 规范 布局 。 使 用 CSS 样式 规 
范 布局 可 以 让 代码 更 加 简洁 和 结构 化 ， 使 站 点 的 访问 和 维护 更 加 容易 。 

网 页 设计 的 第 一 步 是 设计 版 面 布 局 ， 就 像 传统 的 报纸 杂志 一 样 ， 根 据 内 容 的 需要 对 页 面 进 
行 分 块 ， 进 行 排版 布局 。 本 节 将 结合 目前 较为 常用 的 CSS 布局 样式 ， 向 读者 进一步 讲解 布局 的 
实现 方法 。 


7.3.1 两 列 布局 


许多 网 站 都 有 一 些 共 同 的 特点 ， 即 页 面 顶部 放置 大 的 导航 或 广告 条 ， 右 侧 (或 左 侧 ) 是 链接 
或 图 片 ， 另 一 侧 放置 主要 内 容 ， 页 面 底部 放置 版 权 信息 等 ， 如 图 7-22 所 示 的 布局 就 是 经 典 的 两 
列 布局 。 


i 


届 
下 载 有。 入 


Mockplus 


Bo >> 网 RiRtt >> 2018 生 夫人 Nt6 大 5 办 有 


2018 年 最 全 的 网 站 设计 6 大 技巧 【 附 案例 】 
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1 视觉 放 首位 


7-22 经 典 的 两 列 布局 
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一 般 情况 下 ， 此 类 页 面 布局 的 两 列 都 有 固定 的 宽度 ， 而 且 从 内 容 上 很 容易 区 分 主要 内 容 区 
域 和 侧 边栏 。 页 面 布局 整体 上 分 为 上 、 中 、 下 三 个 部 分 ， 即 header 区 域 、main 区 域 和 footer 区 
域 。 其 中 的 main 区 域 又 包含 mainbox 区 域 (主要 内 容 区 域 ) 和 sidebox 区 域 ( 侧 边栏 ), 布局 示意 图 
如 图 7-23 所 示 。 

分 析 图 7-22 所 示 的 页 面 结 构 , header 和 footer 区 域 的 宽度 是 100%, main 区 域 的 宽度 固定 ， 
在 页 面 上 左右 居中 。 页 面 结构 如 图 7-23 所 示 ， 页 面 结构 的 设计 详 见 7-3-1.html。 


这 里 是 主要 内 容 


图 7-23 ”两 列 布局 
【 例 7-3-1】 宽度 固定 的 三 行 两 列 布局 。 首 先 ， 页 面 分 成 上 、 中 、 下 三 部 分 ， 即 header 区 域 、 
main 区 域 和 footer 区 域 ， 而 中 间 的 main 区 域 又 被 d="mainbox" 的 div 和 id="sidebox" 的 div 分 
成 两 块 。 本 例 在 浏览 器 中 的 显示 效果 如 图 7-23 所 示 ， 页 面 文件 7-3-1.html 的 关键 代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title> 三 行 两 列 宽度 固定 布局 </tidle> 
<style type="text/css"> 


# main{ * 设 置 页 面 中 部 区 域 */ 


182 


第 7 章 网 页 布局 设计 


width:800px: 
height300px: 
margin:Spx auto: 
} 
#mainbox { ”* 设 置 页 面 主 内 容 区 域 */ 
float:left: 
width:595px: 
height:300px: 
background:#CCFFFF: 
} 
大 idebox { ”* 设 置 侧 边栏 区 域 */ 
Hoatright 
Width:200px: 
height:300px: 
background:#99CCFF; 
} 
footer { ”人 * 设 置 页 面 底部 区 域 */ 
width:100%; 
height:SOpx: 
background:#66CCFF: 
} 
</style> 
</head> 
<body> 
<header> 这 里 是 header 区 域 <header> 
<div id="main"> 
<div id="mainbox"> 这 里 是 主要 内 容 </div> 
<div id="sidebox"> 这 里 是 侧 边栏 </div> 
</div> 
<footer> 这 里 是 footer 区 域 ， 放 置 版 权 信息 等 内 容 </footer> 
</body> 


【说 明 】 
(1) 本 例 中 ，header 区 域 和 footer 区 域 的 宽度 是 100%，main 区 域 的 宽度 固定 。 
(2) 一 些 页 面 结构 中 ， 页 面 所 有 区 域 的 宽度 都 固定 ， 即 header 区 域 、footer 区 域 和 main 区 


域 的 宽度 相同 且 宽 度 固定 。 如 例 7-1-2 中 的 页 面 结构 , 在 进行 页 面 设计 时 , 首先 使 用 id="container" 
的 div 容器 将 所 有 内 容 包 庄 起 来 。 在 container 内 部 ， header 容器 、id="main" 的 div 容器 和 footer 
容器 把 页 面 分 成 三 个 部 分 , 中 间 的 main 再 被 id="mainbox" 的 div 容器 和 id="sidebox" 的 div 容器 
分 成 两 块 ， 页 面 结构 如 图 7-2 所 示 。 


(3) 需要 注意 的 是 ， 在 例 7-3-1 所 设计 的 页 面 结构 中 ， 并 不 能 满足 实际 情况 的 需要 。 例 如 ， 


当 mainbox 中 的 内 容 过 多 时 ， 在 浏览 器 中 就 会 出 现 内 容 溢出 错位 的 情况 ， 如 图 7-24 所 示 。 


对 于 高 度 和 宽度 都 固定 的 容器 ， 当 内 容 超 过 容器 所 容纳 的 范围 时 ， 可 以 使 用 CSS 样式 中 的 


overflow 属性 将 滋 出 的 内 容 隐藏 或 者 设置 滚动 条 。 
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这 里 是 主要 内 容 


7-24 mainbox 中 内 容 溢出 时 的 情况 


如 果 要 真正 解决 这 个 问题 ， 就 要 使 用 高 度 自 适应 的 方法 ， 即 当 内 容 超过 容器 高 度 时 ， 容 器 
能 够 自动 地 伸展 。 要 实现 这 种 效果 ， 就 要 修改 CSS 样式 的 定义 ， 删 除 样式 中 容器 的 高 度 属性 ， 
并 对 其 后 的 元 素 清除 浮动 。 

【 例 7-3-2】 使 用 高 度 自 适 应 的 方法 进行 宽度 固定 的 三 行 两 列 布局 。 在 7-3-1.html 的 基础 上 ， 
删除 CSS 样式 中 main、mainbox 和 sideBox 的 高 度 ， 并 且 为 footer 设置 清除 浮动 属性 。 本 例文 
件 7-3-2.html 在 浏览 器 中 的 显示 效果 如 图 7-25 所 示 。 

修改 main、mainbox、sideBox 和 footer 的 CSS 定义 ， 代 码 如 下 : 


nain { 人 * 设 置 页 面 的 中 部 区 域 */ 
width:800px: 
margin:5px auto; 
由 
#pnainbox{ 必 设 置 页 面 的 主 内 容 区 域 %/ 
float:left: 
width:595px: 
background:#CCFFFF: 
margin-bottom:Spx: 
} 
#sidebox { ” * 设 置 侧 边栏 区 域 */ 
float:right: 
width:200px: 
background:#99CCFF: 
margin-bottom:Spx: 
} 
footer { 证 设置 页 面 的 底部 区 域 */ 
clear:both: 上 证 清除 浮动 的 影响 */ 
width:10096: 
height:SOpx: 
background:#66CCFF: 
} 


【说 明 】 
(1) 因为 在 CSS 样式 定义 中 ， 没 有 定义 main、mainbox 和 sidebox 的 高 度 ， 所 以 在 容器 内 


和 1a4 
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部 添加 内 容 时 ， 容 器 高 度 会 根据 内 容 的 多 少 自动 调节 ， 不 会 出 现 溢出 容器 之 外 的 现象 。 

(2) 因为 没有 定义 main、mainbox 和 sidebox 的 高 度 ， 并 且 设 置 了 mainbox 和 sidebox 的 浮 
动 效果 , 所 以 mainbox 和 sidebox 脱离 了 文档 流 。 这 时 ， 必 须 对 其 后 的 内 容 footer 设置 清除 浮动 
属性 ， 否 则 footer 会 被 mainbox 和 sidebox 遮挡 住 。 
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图 7.25 高 度 自 适应 三 行 两 列 布局 


7.3.2 三 列 布局 


三 列 布局 在 网 页 设计 中 更 为 常用 ， 如 图 7-26 所 示 。 对 于 这 种 类 型 的 布局 ， 浏 览 者 的 注意 力 
最 容易 集中 在 中 间 栏 的 信息 区 域 ， 其 次 才 是 左右 两 侧 的 信息 。 
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三 列 布局 与 两 列 布局 非常 相似 ， 在 处 理 方式 上 可 以 利用 两 列 布局 结构 的 方式 进行 处 理 ， 如 
图 7-27 所 示 的 就 是 由 三 个 独立 的 列 组 合 而 成 的 三 列 布局 。 


图 7-27 三 列 布局 示意 图 


【 例 7-3-3】 设 计 图 7-27 所 示 的 三 列 布局 的 页 面 结构 。 

首先 使 用 id="container" 的 div 容器 将 所 有 内 容 包 里 起 来 。 在 container 内 部 ，header 容器 、 
id="main" 的 div 容器 和 footer 容器 把 页 面 分 成 三 个 部 分 ， 中 间 的 main 区 域 再 被 d="left" 的 div 
容器 、id="center" 的 div 容器 和 id="right" 的 div 容器 分 成 三 块 ， 页 面 结构 如 图 7-27 所 示 。 本 例 
文件 7-3-3.html 的 页 面 代 码 和 CSS 样式 代码 如 下 。 


第 7 章 网 页 布局 设计 


backeround-color-#DDDDDD: 
} 
#main #left{ 
width:190px: 
height:29Spx: 
backeround-color-#90BAFF: 
float:left: 
} 
jnain #center{ 
width:235px: 
height:295px: 
background-color#99CCFF: 
margin:0 2px; 
float:left: 
} 
jnain #right{ 
width:190px; 
height:295px: 
background-color#90BAFF: 
float: right: 
} 
footer{ 
clearboth: 
height:SOpx: 
background-color:#66CCFF:; 
} 
</style> 
</head> 
<body> 
<div id="container"> 
<header> 此 处 显示 "header" 的 内 容 </header> 
<div id="main"> 
<div id="left"> 此 处 显示 id="left" 的 内 容 </div> 
<div id="center"> 此 处 显示 id="center" 的 内 容 </div> 
<div id="right"> 此 处 显示 id="right" 的 内 容 </div> 
</div> 
<footer> 此 处 显示 "footer" 的 内 容 </footer> 
</div> 
</body> 


【说 明 】 例 7-3-3 中 ， 页 面 宽度 固定 ， 三 列 布局 中 并 列 的 三 个 块 宽度 也 都 固定 。 有 了 时， 在 进 
行 网 页 设计 时 ， 需 要 设计 能 随时 适应 屏幕 宽度 的 页 面 结构 ， 设 计 人 员 可 以 利用 负 边 距 原理 实现 
两 列 定 宽 、 中 间 自 适应 的 三 列 结构 。 这 里 负 边 距 指 的 是 将 某 个 元 素 的 margin 属性 值 设置 成 负 值 ， 
对 于 使 用 负 边 距 的 元 素 , 可 以 将 其 他 容器 “吸引 ”到 身边 , 从 而 解决 页 面 布局 的 问题 , 如 例 7-3-4 
所 示 的 页 面 结构 设计 方法 。 

【 例 7-3-4】 两 列 定 宽 、 中 间 自 适应 的 三 列 结构 。 页 面 中 id="container" 的 div 容器 包含 了 主 
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要 内 容 区 域 (mainBox)、 次 要 内 容 区 域 (submainBox) 和 侧 边 栏 (sideBox)。 如 果 对 浏览 器 窗口 进行 
缩放 ， 可 以 看 到 中 间 列 自 适 应 宽度 的 效果 。 
7-3-4.html 的 页 面 代 码 和 CSS 样式 代码 如 下 。 


<head> 
<title> 两 列 定 宽 、 中 间 自 适应 的 三 列 结构 </title> 
<style type="text/css"> 
et 
margin:0; 
Ppadding:0; 
} 
body { 
font-family:" 宋 体 "; 
font-size:18px: 
color:#000; 
} 
header { 
height:SO0px: 
background:#99FFFF; 
} 
#container { 
overflow:auto; 刻 洲 出 自动 伸展 */ 


background:#DDDDDD: 
height:200px: 
} 
#content { 
height:200px: 
backeround:#99CCFF: 
margin:0 210px 0310px: 。“”/* 右 外 边 距 空 白 为 210px， 左 外 边 距 空 白 为 310px*/ 
} 
#submainBox { 
float:left: 
height:200px: 
background:#90BAFF: 
Width:300px: 
margin-left:-100%%; /*margin-left 为 -100%， 正 好 使 左 栏 位 于 页 面 左 侧 */ 
} 
#sideBox { 
float:left: 
height:200px: 
width:200px: 
margin-left:-200px: 证 左 浮动 200px， 大 小 为 本 身 的 宽度 200px*/ 
backeround:#90BAFF: 
} 
footer { 
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clearboth: 

height:SOpx: 

backeround:#66CCFF: 
} 
</style> 
</head> 
<body> 
<header> 这 里 是 header 区 域 </header > 
<div id="container"> 

<div id="mainBox"> 

<div id="content"> 主 要 内 容 区 域 一 -常用 的 CSS 布局 </div> 
</div> 
<div id="submainBox"> 次 要 内 容 区 域 一 -常用 的 CSS 布局 </div> 

<div id="sideBox"> 这 里 是 侧 边栏 </div> 
</div> 
<footer> 这 里 是 footer 区 域 ， 放 置 版 权 信息 等 内 容 </footer> 
</body> 
【说 明 】 本 例 中 的 主要 内 容 区 域 (mainBox) 中 又 包含 具体 的 内 容 区 域 (content), 设计 思路 是 利 

用 mainBox 的 浮动 特性 ,将 宽度 设置 为 100%， 再 结合 content 的 左右 外 边 距 所 留 下 的 空白 , 利 
用 负 边 距 原理 将 次 要 内 容 区 域 (submainBox) 和 侧 边 栏 (sideBox)“ 吸 引 ” 到 身边 。 


7.3.3 三 列 自 适应 布局 


7.3.2 节 讲解 的 示例 中 左右 两 列 的 宽度 都 是 固定 的 ,能 否 将 其 中 一 列 或 两 列 都 变 成 自 适 应 结 
构 ， 设 计 成 三 列 自 适应 布局 呢 ? 下 面 首 先 介绍 三 列 自 适 应 结构 的 特点 ， 如 下 所 示 。 

e 三 列 都 设置 为 自 适应 宽度 。 

e@ 中 间 列 的 主要 内 容 首先 出 现在 网 页 中 。 

@ 可 以 允许 任意 一 列 的 内 容 为 最 高 。 

下 面 演示 如 何 实现 三 列 自 适 应 结构 。 

【 例 7-3-5】 三 列 自 适应 结构 。 三 列 自 适应 结构 的 页 面 效果 如 图 7-28 所 示 。 对 浏览 器 窗口 进 
行 缩放 ， 可 以 看 到 三 列 自 适应 宽度 的 效果 。 将 浏览 器 的 窗口 缩小 时 ， 本 例文 件 7-3-5.html 在 浏 
览 器 中 的 显示 效果 如 图 7-29 所 示 。 

在 例 7-3-4 的 基础 上 ， 修 改 content、submainBox 和 sideBox 元 素 的 CSS 定义 ， 代 码 如 下 。 


#99CCEF: 

margin:0 31%031%; ”/* 设 置 外 边 距 左 右 距离 为 自 适应 */ 
} 
#submainBox { 

float:left: 

height:200px: 

background:#90BAFF: 

Width:3096: 上 # 设 置 宽度 为 30%*/ 

margin-left:-100%: 。” 族 设 置 负 边 距 为 -100%*/ 
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#sideBox { 
float:left: 
height:200px: 
Width:30%; 片 设置 宽度 为 30%6*/ 
margin-left:-30%; /+ 设置 负 边 距 为 -30%*/ 
backeround:#66CCFF: 


【说 明 】 要 实现 三 列 自 适 应 结构 , 要 从 改变 列 的 宽度 入 手 。 首先 , 要 将 submainBox 和 sideBox 
两 列 的 宽度 设置 为 自 适应 。 其 次 ， 要 调整 左右 两 列 有 关 人 负 边 距 的 属性 值 。 最 后 ， 要 对 内 容 区 域 
content 容器 的 外 边 距 进行 修改 。 


© © 12700180201Aa 


DD =n = x 十 


apter07/7 


Shtml?_hbt=1556025793210 全 


图 7-28 三 列 自 适应 结构 的 页 面 效 果 


实 训 


图 7-29 浏览 器 窗口 缩小 时 的 状态 


【 实 训 任务 】 制 作爱 德 照明 网 站 的 首页 主体 部 分 ， 本 例文 件 7-4.html 在 浏览 器 中 的 显示 效果 
如 图 7-30 所 示 。 


DD 册页 生体 分 
© |© 1270018020 


0633-3981234 
400-180-6789 


地 址 :山东 省 日 照 市 学 半路 
科技 工业 丽 A 区 16 号 


er07/7-4 html?_hbt=1538293468691 


企业 新 闻 MORE> 


上 因应 在 丰 汽车 概念 ，AD8 反 能 LED 头 灯 系 统 发 展 迅 这 ,人 
01 
上 LED 灯具 国内 业务 市 场 研讨 会 LED 灯 具 国内 业务 2017-4-6 
18 
车 用、MiniLED 等 新 产品 女 力 ， 亿 光 & 荣 创 看 好 营运 慑 
1 
上 OLED 购 明 市 场 59 册 全 与 二 如 - LEDinside 
1 
> 江苏 加 快 半 号 伯 因 机 产业 发 展 ，2020 年 规模 将 达 1200 忆 . 
201 


上 智能 草 明 进入 高 速 发 天 ,工业 及 商业 为 量 大 应 用 场 要 
1 


图 7-30 首页 主体 部 分 


客户 案例 


。 小 区 数码 管 训 化 工程 -- 方 1 
。 水 世界 楼 体 训 化 -入 央 最 ， 等 你 欣 务 美 最 
。 开发 区 委 会 夜 轩 吉 化 2018 年 3 月 交工 


【知识 要 点 】 盒 子 模型 的 特点 及 常用 属性 、 元 素 的 定位 与 浮动 。 
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【 实 训 目标 】 掌 握 综合 使 用 CSS 布局 页 面 的 技术 。 
7.4.1 任务 分 析 


1. 页 面 结构 分 析 


根据 页 面 效 果 图 和 经 验 分 析 得 知 ， 页 面 整体 内 容 可 以 放 在 一 个 div 中 ， 在 这 个 div 中 再 内 
套 三 个 div， 自 左 向 右 排列 。 


2. CSS 样式 分 析 


(1) 整个 页 面 的 布局 通过 div 盒子 实现 ， 宽 度 为 1050px， 左 右 居中 。 

(2) 左 侧 的 div 盒子 向 左 浮动 ， 其 中 嵌 套 放置 视频 的 div 和 放置 联系 方式 的 div。 中 间 的 div 
盒子 也 向 左 浮动 ， 其 中 是 企业 新 闻 无 序列 表 。 右 侧 的 div 向 右 浮动 ， 其 中 放置 客户 案例 图 片 和 
客户 案例 无 序列 表 项 。 

(3) 对 超 链接 文本 MORE， 通 过 绝对 定位 进行 定位 。 


3. 准备 素材 


在 “案例 ”文件 夹 下 创建 文件 夹 media， 用 于 存放 视频 文件 。 
将 本 页 面 需 要 使 用 的 图 像素 材 和 视频 文件 分 别 存放 在 文件 夹 img 和 media 中 。 


7.4.2 任务 实现 


1. 创建 页 面 文件 


(1) 启动 HBuilder， 把 需要 的 图 片 资料 复制 到 当前 项 目的 img 文件 夹 中 。 
(2) 在 当前 项 目 中 新 建 一 个 HTMLS5 文档 ， 文 件 名 为 7-4.html， 页 面 文 件 结构 代码 如 下 。 


<head> 
<meta charset="utf-8" /> 
<link href="CSS/7-4.css" rel="stylesheet" type="text/css"> 
<title> 网 站 首页 主体 部 分 </title> 
</head> 
<body> 
<div id="main"> 
<div class="main left"> 
<h3>&nbsp: 产 品 展示 </h3> 
<Video src="dedialledmp4" autoplay loop></video> 
<div class="lianxi"> 
<p><img strc="img/telephone.jpg">0633-3981234<br/>400-180-6789</p> 
<p><img strc="img/envelope.jpg"> 地 址 :山东 省 日 照 市 学 苑 路 <br> 科 技工 业 园 A 区 16 号 <p> 
</div> 
</div> 
<div class="main center'> 
<h3> 企 业 新 闻 </h3> ”<ahre 全 "入 target="_blank" class="more">MORE&raquo:</a> 
<uP 
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<li><a hre 全 "> 因应 智慧 汽车 概念 ，ADB 智能 LED 头 灯 系统 发 展 迅速 ，ADB 智能 LED 头 灯 兴 起 
</la></li> 
<span class="date">2018-03-30</span> 
<li><ahre 人 ">LED 灯具 国内 业务 市 场 研讨 会 LED 灯具 国内 业务 2017-4-6</a></li> 
<span class="date">2018-03-03</span> 
<li><a href=""> 车 用 、MiniLED 等 新 产品 助力 ， 亿 光 & 荣 创 看 好 营运 服务 工作 .</a></li> 
<span class="date">2018-03-03</span> 
<li><ahre 人 ">OLED 照明 市 场 的 机 会 与 挑战 -LEDinside</a></li> 
<span class="date">2018-03-03</span> 
<li><a hre 人 "> 江苏 加 快 半导体 照明 产业 发 展 ，2020 年 规模 将 达 1200 亿 .</a></li> 
<span class="date">2018-03-03</span> 
<li><a hre 仁 "> 智能 照明 进入 高 速 发 展 ， 工 业 及 商业 为 最 大 应 用 场景 .</a></li> 
<span class="date">2018-03-03</span> 
< 
</div> 
<div class="main right"> 

<h3> 客 户 案例 </h3> <a hre 仁 "#" target="_blank" class="more">MORE&raquo;</a> 

<div class="imgbox"> 
<img stc="img/led jgd9.jpg"/> 

</div> 

<u> 
<li><a hre 全 "> 乌 海 政府 亮 化 工程 --2016 年 7 月 完工 ， 美 丽 的 城市 </a></li> 
<li><a hre 全 "> 夜景 亮 化 工程 公司 -美丽 一 座 城市 的 夜晚 <a><i> 
<li><a hre 全 "> 小 区 数码 管 亮 化 工程 -方便 大 家 出 行 <a></i> 
<li><a hre 全 "> 水 世界 楼 体 亮 化 -旅游 盛 景 ， 等 你 欣赏 美景 <a><i> 
<li><a hre 全 "> 开发 区 委 会 夜景 亮 化 -2018 年 3 月 完工 </a><i> 

</ul> 

</div> 


2. 创建 CSS 样式 文件 
在 css 文件 夹 下 新 建 一 个 名 为 7-4.css 的 样式 表 文 件 ， 代 码 如 下 : 


/# 针 对 所 有 的 HTML 元 素 定义 样式 */ 
margin:0: 上 # 外 边 距 为 0px*/ 
padding:0:; 刻 内 边 距 为 0px*/ 
box-sizing:border-box: 人 # 盒 子 的 宽度 值 和 高 度 值 包 含 元 素 的 内 边 距 和 边框 所 
} 
af 片 设置 超 链接 的 样式 */ 
text-decoration:none: 证 无 修饰 */ 
} 
body{ 片 设置 页 面 的 整体 样式 */ 
width:1050px: /# 宽 度 为 1050px*/ 
margin:0 auto: 证 页 面 自动 居中 对 齐 */ 
font-family: "微软 雅 黑 ": /# 字 体 为 "微软 雅 黑 "#/ 
font-size:13px: 证 文字 大 小 为 13px*/ 


color#333: 证 文字 颜色 为 灰色 */ 
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position:relative 刻 相 对 定位 */ 

} 

13{ /*h3 标题 的 样式 */ 
font-size:16px: 

Color:#545861: 证 文字 颜色 为 浅 灰 色 */ 
font-weight:500: 上 文字 粗细 为 500*/ 

} 

店 首 页 中 部 -主体 部 分 样式 开始 */ 

#main{ 
clear:both:; 证 清除 两 侧 浮动 */ 

} 

#main .main_left#main .main_center#main main right{ ”/* 定 义 主体 部 分 的 左 、 中 、 右 三 块 */ 
Padding:0px 20px: 上 # 上 、 下 内 边 距 为 Opx， 左 、 右 内 边 距 为 20px*/ 
margin-top:20px ; 片上 外 边 距 为 20px*/ 
font-family: "微软 雅 黑 "; 让 字体 为 "微软 雅 黑 "*/ 
position:relative: 证 相对 定位 */ 

» 

#main h3{ 
font-size:16px; 
color: #545861; 
font-weight:500: /文字 粗细 为 500*/ 
margin-bottom:12px ; 让 下 外 边 距 为 12px*/ 

} 

店主 体 左 侧 样式 开始 */ 

#main main left{ 

Width:307pX: 
padding-left:Opx: 人 # 左 内 边 距 为 Opx*/ 
float:left: 

} 

#main main left video{ 
width:285px: 
height:200px: 
background-color#CCCCCC: 


border 1px solid #BBBBBB: 

} 

证 首页 联系 方式 盒子 样式 开始 */ 

#main .main left lianxi{ 
width:285px: 
height: auto: 
border: 1px solid #DDDDDD: 
border-radius:Spx: 
margin-top:1Spx: 
padding:0 15px: 

} 

#main .main left lianxi p{ 
height:SOpx: 
line-height:20px: 
margin-top:8px: 
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} 
#main main left lianxi img{ 
width:43px; 
height:43px: 
float:left: 
margin-right: 1 5px ; 
} 
上 # 首 页 联系 方式 盒子 样式 结束 六 
证 主体 左 侧 样式 结束 */ 
店主 体 中 部 样式 开始 -企业 新 闻 样 式 */ 
#main main center{ 


Width:390px: 
border-left:3px solid #DDD: /# 左 边框 为 3px 的 浅 灰 色 实 线 */ 
border-right:3px solid #DDD; 上 右边 框 为 3px 的 浅 灰色 实 线 */ 
margin-bottom: 10px: 让 下 外 边 距 为 10px*/ 
float: le 全 
} 
jnain .main center ul li{ 片 列表 项 的 样式 */ 
border-top: 1px dotted #999999; 片上 边框 为 1px 的 灰色 点 线 */ 
padding:Spx Opx: 上 # 上 、 右 、 下 、 左 内 边 距 依次 为 5px、0px、5px、0px*/ 
white-space:nowrap; /# 强 制 文 本 不 能 换行 所 
overflow:hidden: 证 隐藏 溢出 文本 */ 
text-overflow:ellipsis: /# 滋 出 文本 被 修剪 ， 显 示 省 略 号 s/ 
line-height:19px: 证 行 高 为 19px*/ 
} 
#main .main_center ul li:before{ 
content-url(../img/triangle-icon-blue jpg); 证 在 列表 项 内 容 前 插入 三 角 图 标 */ 
padding-right:4px: /# 右 内 边 距 为 4px*/ 
} 
#main .main_center .date{ 
Color:#999999; 
display:block: 店 块 级 元 素 */ 
margin:0 0 10px 10px: 上 # 上 、 右 、 下 、 左 外 边 距 依次 为 Opx、0px、10px、10px*/ 
上 主体 中 部 样式 结束 */ 
证 主体 右 侧 样式 开始 */ 
main main right{ 
width:350px: 
padding-right:Opx : 上 # 右 内 边 距 为 Opx*/ 
float:right: 
} 
#main main right imgbox{ 片 客户 案例 的 盒子 样式 */ 
width:325px: 
height:200px: 
position:relative; 
overflow:hidden: 


} 
#main main right imgbox img{ 让 客户 案例 的 图 片 样式 */ 
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width:325px: 
height:200px: 
} 
#main main right ul li{ 
line-height:27px; /# 行 高 为 27pxs/ 
margin-left:20px ; 大 左 内 边 距 为 20px*/ 
} 
店主 体 部 分 无 序列 表 中 超 链 接 样式 定义 开始 */ 
#main ul a{ 
text-decoration:none; 证 文本 无 修饰 */ 
Color:#333333; 
时 
#main ul alink avisited{ 
Color:#333333; 
; 
#main ul a:hover{ 
colorred: 
text-decoration: underline: 证 加 下 夯 线 */ 


» 
主体 部 分 无 序列 表 中 超 链接 样式 定义 结束 */ 


#main more 证 定义 MORE 的 样式 */ 
position:absolute: 刻 绝 对 定位 */ 
top:10px; /# 距 顶部 10px*/ 
right:10px: A# 离 右边 10px*/ 
text-decoration:none; 证 无 修饰 */ 
color:#0091D8; 

} 

族 首 页 中 部 -主体 部 分 样式 结束 */ 


3. 浏览 网 页 


在 Chrome 浏览 器 中 浏览 网 页 ， 效 果 如 图 7-30 所 示 。 

【 实 训 说 明 】 

(1) 三 个 并 列 的 盒子 宽度 固定 ， 宽 度 之 和 比 页 面 总 宽度 小 3px， 通 过 浮动 在 盒子 之 间 留 下 
3px 的 空 阶 。 

(2) 在 CSS 定位 布局 中 ， 一 般 遵 循 “ 外 部 相对 定位 ， 内 部 绝对 定位 ”的 原则 。 


本 章 小 结 


本 章 首 先 介绍 了 使 用 页 面 布局 标签 +CSS 布 局 、 元 素 的 浮动 、 不 同 浮动 方向 呈现 的 效果 、 清 
除 浮动 的 常用 方法 ， 然 后 讲解 了 元 素 的 定位 属性 及 网 页 中 常见 的 几 种 定位 模式 ， 最 后 讲解 了 典 
型 的 CSS 布 局 及 网 页 中 常见 的 两 列 布局 和 三 列 布局 。 在 本 章 的 最 后 ， 使 用 CSS 布 局 技术 制作 了 
爱 德 照明 网 站 的 首页 主体 部 分 。 
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通过 本 章 的 学 习 ， 读 者 应 该 能 够 熟练 地 运用 页 面 布局 相关 知识 进行 网 页 布局 ， 掌 握 浮动 和 
定位 技术 ， 人 掌握 典型 的 CSS 布局 方式 。 


练习 题 


1. 制作 如 图 7-31 所 示 的 两 列 固定 宽度 的 居中 型 页 面 布局 。 


图 7-31 练习 题 1 效果 图 


2. 制作 如 图 7-32 所 示 的 页 面 布局 ， 页 头 和 页 脚 宽度 为 100%， 中 间 主 体 部 分 三 列 固定 宽度 。 


图 7-32 练习 题 2 效果 图 


3. 使 用 本 章 知 识 按照 如 图 7-33 所 示 的 内 容 ， 完 成 下 面 的 任务 。 
(D 根据 图 7-33 所 示 的 博客 页 面 ， 设 计 个 人 博客 的 页 面 结构 。 
QQ) 模仿 “ 杨 青 个 人 博客 ”首页 ， 制 作 个 人 博客 页 面 。 
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D EA 1 


© O127001 a ter07/xtL/t7-1 8 py 


鲍 一 各 


htmls 个 人 博客 模板 《.… 个 人 博客 模板 《show tt.。 html5 个 人 博客 模板 (si 网 名 ; DanceSmile | BIS38 


HH 
本寺 : 四 川 省 一 丰 基 市 
+ 下 地 全 棉 可 模板 1 下 载 横 质 者 漆 : dancesmiling@qq.com 
8 = | ee 
Nn LS w 
: ag 
[一 = 
hanl5 古 典 个 人 博客 模 html5 个 人 博客 模板 《 个 人 博客 模板 { 早 安 》 一 一 点 击 排行 


【 笑 动作 品 】 本 各 幸免 小 白 个 人 博客 横 扳 


+ 下 权 相 酸 -FS 便民 + Fe 


最 新 文章 


帝国 cms 特 环 调用 子 栏目 信息 以 及 头条 图 片 


| | >| 


轩 色 奈 丘 时 间 欠 htmlS 个 人 博客 梳 析 
下 ea (> 
我 是 怎么 评价 自己 的 ? 
ces oe 辣 滨 珊 文 >> 
个 人 博客 模板 《show time) 亚 色 版 st | 
-AL 
反对 兴 > 
出 一 网 = 六 
sea nad 网 苇 闹 文 >> 
ae] [1] [jl 


图 7-33 个 人 博客 页 面 
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链接 与 导航 


网 页 中 的 链接 、 列 表 与 菜单 随处 可 见 ， 本 章 将 讲解 使 用 CSS 设置 链接 与 导航 菜单 的 方法 。 


本 章 的 学 习 目标 : 

e 理解 链接 的 4 种 状态 ， 能 够 根据 它们 所 处 的 状态 来 设置 其 样式 。 
掌握 文字 链接 样式 的 设置 ， 能 够 制作 不 同 区 域 的 链接 效果 。 
掌握 图 像 链接 样式 的 设置 。 

掌握 纵向 导航 菜单 的 设计 ， 能 够 制作 网 站 的 产品 列表 。 
掌握 使 用 CSS 设置 横向 导航 菜单 的 常用 方法 。 


| 链接 样式 


8.1.1 案例 分 析 


【案例 展示 】 利 用 CSS 设置 链接 样式 的 基本 知识 制作 产品 中 心 -景观 路 灯 局 部 页 面 ， 为 图 片 
和 文字 设置 超 链接 ， 本 例文 件 8-1.html 在 浏览 器 中 的 浏览 效果 如 图 8-1 所 示 。 


D mgmt 
局 © fle///E/Aledled/chapterO8/8-1 html 女 | 3 


鱼 宇 广 杜 形 生 现 柱 多 式 千 开 LED 局 观 灯 


十 各 污浊 祥云 虹 现 条 福 HALEDRIT 


图 8-1 产品 中 心 -景观 路 灯 局 部 页 面 
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【知识 要 点 】 掌 握 使 用 CSS 设置 链接 样式 的 常用 方法 。 
【学 习 目 标 】 超 链接 的 4 种 状态 及 设置 顺序 。 


8.1.2 设置 文字 链接 样式 


伪 类 中 通过 :link、:visited、:hover 和 :active 来 控制 链接 内 容 在 被 访问 前 、 访 问 后 、 鼠 标 悬 停 
时 以 及 用 户 激活 时 的 样式 。 需 要 说 明 的 是 ， 这 4 种 状态 的 顺序 不 能 颠倒 ， 否 则 可 能 会 导致 伪 类 
样式 不 能 实现 。 

【 例 8-1-1】 改 变 文字 链接 的 外 观 。 对 于 本 例文 件 8-1-1.html， 当 鼠标 未 悬 停 时 文字 链接 的 
效果 如 图 8-2 所 示 ， 鼠 标 悬 停 在 文字 链接 上 时 的 效果 如 图 8-3 所 示 。 页 面 关键 代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title> 超 链接 样式 <ltitle> 
<style type="text/css"> 

Tavaf{ 

padding:8px 15px:; 
text-decoration:none; 

} 

-nav ahover { * 鼠 标 悬 停 时 样式 */ 
color:-#f00; 
font-size:20pX: 
text-decoration:underline; 

Hb 
</style> 
</head> 
<body> 
<nav> 
<a hre 仁 "> 首页 </a> 
<a hre 伍 "##'> 关 于 </a> 
<a hre 全 "> 客服 </a> 
<a href" 太 人 > 联系 </a> 
</nav> 


7 8-1-Lhtml yn 8B-1-Lhtml 


C Ofilet//E/Aladled... 食 | : 


首页 关于 ”客服 联系 


C ©Ofile///E/Aladled.. 充 : 


首页 “关于 ”客服 联系 


图 82 和 鼠标 未 县 停 时 文字 链接 的 外 观 图 83 鼠标 县 停 时 文字 链接 的 外 观 


【 例 8-1-2】 制 作 网 页 中 不 同 区 域 的 链接 效果 。 本 例文 件 中 ， 当 鼠标 经 过 导航 区 域 时 ， 文 本 
变 成 蓝 色 带 上 画 线 ， 如 图 8-4 所 示 。 当 鼠标 经 过 “客户 服务 中 心 ”文字 超 链接 时 ， 文 本 变 成 红 
色 带 下 画 线 ， 如 图 8-5 所 示 。 本 例文 件 8-1-2.html 的 关键 代码 如 下 。 
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<head> 
<meta charset="utf-8"> 


<title> 使 用 CSS 制作 不 同 区 域 的 超 链接 风格 </title> 


<style type="text/css"> 
alink { 
font-size:17px: 
color:#0000ff: 
text-decoration:none; 
} 
avisited { 
color: #00fF: 
text-decoration:none; 
} 
ahover { 
color:#cc3333; 
text-decoration:underline; 
} 
nav{ 
text-align:center:; 


background-color#cccccc: 


.navalink{ 
color: #ff0000; 
text-decoration:underline; 
font-size:23px; 
font-family: "华文 细 黑 ": 
} 

.nav a:visited { 
color:-#0000f; 
text-decoration:none; 

} 
nav a:hover { 
color:#00f: 
text-decoration:overline; 
} 
footer{ 
text-align:center: 
margin-top:120px: 
} 
</style> 
</head> 
<body> 


上 # 未 访问 的 链接 所 


片 访问 过 的 链接 */ 


让 鼠标 经 过 的 链接 */ 


刻下 夯 线 */ 


片 导航 样式 */ 


上 # 导 航 中 的 超 链接 样式 


刻 上 夯 线 */ 


<h2 align="center">Led 灯 网 店 </h2> 


<nav> 


<a hre 人 "和 > 首页 </a>&nbsp:&nbsp:&nbsp: 
<a hre 人 =" 六 '> 关 于 </a>&nbsp:&nbsp:&nbsp: 
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<ahre 全 "#"> 客 服 </a>&nbsp:&nbsp:&nbsp: 
<a href="#' > 联系 </a> 
</nav> 
< footer> 
版 权 所 有 &copy:&nbsp:&enbsp;<a hre 全 "党 > 客户 服务 中 心 </a> 
</footer> 
<Jbody> 


C | ©file//E/AladLed/chapter0.. 人 : 


Led 灯 网 店 
首页 关于 客服 联系 


CGC © file///E/AladLed/chapter0... 广 了 


Led 灯 网 店 


首页 关于 客服 联系 


版 权 所 有 日 容 户 服务 中 心 
图 84 鼠标 经 过 导航 区 域 时 的 链接 风格 图 8-5 鼠标 经 过 “客户 服务 中 心 ”时 的 链接 风格 


【说 明 】 

在 指定 超 链接 样式 时 , 建议 按 :link、:visited、:hover 和 :active 的 顺序 指定 。 如果 先 指定 :hover 
样式 ， 然 后 再 指定 :visited 样式 ， 则 在 浏览 器 中 显示 时 ，:hover 样式 将 不 起 作用 。 

页 面 中 的 导航 区 域 用 nav 标签 定义 , 并 且 分 别 定义 了 .nav a:link、.nav a:visited 和 .nav a:hover 
这 3 个 后 代 选 择 器 ， 因 此 可 以 使 导航 区 域 的 超 链接 风格 区 别 于 版 权 区 域 文字 的 超 链接 风格 。 


8.1.3 设置 图 像 链接 样式 


网 页 设计 中 对 文字 链接 的 修饰 不 仅 限于 增加 边框 、 修 改 背 景 颜 色 等 方式 ， 还 可 以 利用 背景 
图 片 对 文字 链接 进行 进一步 的 美化 。 

【 例 8-1-3】 设 置 图 文 链接 。 本 例文 件 为 8-1-3.html， 当 鼠标 未 悬 停 时 文字 链接 的 效果 如 
图 8-6 所 示 ， 当 鼠标 悬 停 在 文字 链接 上 时 文字 链接 的 效果 如 图 8-7 所 示 。 页 面 的 关键 代码 如 下 。 


padding-left:20px: 证 设置 左 内 边 距 ， 用 于 增加 空白 ， 显 示 背 景 图 片 */ 


background-image:#dddddd url(img/star.gif) no-repeat left center /* 设 置 背景 */ 
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} 
</style> 
</head> 


<a hre 人 ="## 作 鼠标 悬 停 在 链接 上 将 显示 背景 颜色 和 背景 图 像 </a> 
<body> 


[= 天 ¥] 
中 图 文 链接 x 量 二 


C © 127.0.0.1:8020/Aladled/c.. 食 


鼠标 悬 停 在 链接 上 将 显示 背景 颜色 和 背景 图 像 


8-6 ”鼠标 未 悬 停 时 图 文 链接 的 效果 


[= 回 区 


口 图 文 链接 x 二 
C © 127.0.0.1:8020/AladLed/c 女 
女 鼠 标 县 停 在 链接 上 将 显示 背景 颜色 和 背景 图 像 
127.0.0.1:8020/.../8-1 


图 8-7 鼠标 县 停 时 图 文 链接 的 效果 


【说 明 】 
本 例 CSS 代码 中 的 padding-left:20px: 用 于 增加 容器 左 侧 的 空白 ， 为 后 来 显示 背景 图 片 留 出 
空间 。 当 触发 鼠标 悬 停 操 作 时 ， 增 加 背景 图 片 和 背景 颜色 ， 背 景 图 片 位 置 在 容器 的 左边 中 间 。 


8.1.4 ”案例 一 一 制作 产品 中 心 -景观 路 灯 局 部 页 面 


1. 创建 项 目 ， 准 备 素材 


创建 项 目 ， 把 需要 的 图 片 文件 复制 到 img 文件 夹 中 。 如 果 已 建 项 目 ， 则 把 图 片 素材 复制 到 
已 建 项 目的 img 文件 夹 中 即 可 。 


2. 创建 网 页 结构 文件 


在 当前 项 目 中 创建 HTML5 网 页 文件 ， 文 件 名 为 8-Lhtml。 
在 页 面 中 创建 无 序列 表 ， 列 表 项 目 为 图 片 和 文字 ， 为 图 片 和 文字 设置 超 链 接 ， 代 码 如 下 。 


<body> 
a> 
<li><a hre 人 "><img ste="img/led jgdl jpg" width="180" height="180"/><br/> 
仿古 锥 形 广场 景观 灯 柱 </a> 
< 人 > 
<li><a hre 人 "><img ste="img/led jgd2jpg" width="180" height="180"/><br/> 
铁 空 方 柱 形 景观 灯 柱 </a> 
< 性 
<li><a href="><img ste="img/led jgd3jpg" width="180" height="180"/><br/> 
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多 头 造型 LED 景观 灯 </a> 

<I> 

<li><a hre 全 "><img src="img/led jgd4jpg" width="180" height="180"/><br/> 
莲花 造型 广场 景观 灯 柱 </a> 

<> 

<l><a href=""><img src="img/led jgd5 .jpe" width="180" height="180"/><br/> 
内 透 光 方 柱 景观 灯 </a> 

</> 

<li><a href=""><img stc="img/led jgd6jpg" width="180" height="180"/><br/> 
现代 园林 庭院 景观 灯 </a> 

<> 

<li><a href=""><img stc="img/led jgd7jpg" width="180" height="180"/><br/> 
古典 浮雕 祥云 景观 灯 柱 </a> 

< 由 > 

<li><a hre 全 "><img strc="img/led jgd8jpg" width="180" height="180"/><br/> 
立柱 仿 云 石 LED 景观 灯 </a> 

<> 

<ul> 


<lbody> 


3. 外 部 样式 表 


创建 外 部 CSS 样式 以 美化 图 片 和 文字 信息 列表 。 在 文件 夹 css 下 新 建 一 个 名 为 8-1.css 的 样 
式 表 文 件 ， 代 码 及 分 析 如 下 。 
用 * 人 定义 所 有 元 素 的 默认 内 边 距 和 外 边 距 为 0， 使 得 容易 控制 边 距 并 进行 布局 。 
ll 必 设 置 所 有 元 素 的 默认 样式 所 
margin:Opx; 
padding:Opx; 
box-sizing:border-box; /* 元 素 的 宽度 和 高 度 包括 元 素 的 边框 和 内 边 距 */ 
} 
定义 列表 <ul> 的 宽度 和 高 度 ， 并 且 在 浏览 器 中 水 平 居中 显示 。 
uf{ 
width:820px: 
height:480px: 
list-style:none: 证 不 显示 列表 项 目标 记 符 号 */ 
border: 1px solid #555; 
margin: 10px auto; 证 外 边 距 上 下 为 10px， 左 右 为 auto*/ 
} 
为 了 实现 <1i> 列 表 项 的 横向 排列 ， 使 用 属性 “foatleft ”来 实现 ， 设 置 外 边 距 以 实现 各 个 列 
表 项 之 间 以 及 其 他 元 素 之 间 的 合理 布局 。 
ullif 
width:180px: 
height:210px: 
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float-left: 片 向 左 浮动 ， 使 列表 项 横向 排列 */ 
margin:10px: 访 外 边 距 为 10px*/ 
font-size: 14px ; 


text-align:center: ”/* 文 本 水 平 居中 */ 
} 
设置 图 片 的 宽度 和 高 度 ， 这 样 在 页 面 中 就 可 以 省 略 有 关 图 片 大 小 的 代码 ， 简 化 页 面 文件 。 
uliimg{ 
width:180px: 
height:180px: 
Iargin:10pX: 
} 
设置 超 链接 文字 的 样式 ， 去 掉 默 认 的 下 画 线 。 
ulliaf 
text-decoration:none; /* 文 本 无 修饰 */ 
Color:#444; 
} 
设置 当 鼠 标 悬 停 在 超 链 接 文本 上 时 ， 文 字 颜色 的 变化 。 
ulliahover{ 必 鼠 标 悬 停 时 的 样式 %/ 
color#0091D8: 
} 
设置 当 鼠 标 悬 停 在 超 链接 图 片上 时 ， 图 片 加 上 边框 。 因 为 设置 了 “box-sizing:border-box;” 
属性 ， 图 片 边框 也 包括 在 定义 的 宽度 和 高 度 180px 内 ， 所 以 当 鼠 标 指向 图 片 时 ， 图 片 会 缩小 到 
宽度 和 高 度 为 178px， 出 现 动态 效果 。 
ulliaihover img{ 让 鼠标 悬 停 时 的 图 片 样式 */ 
border:2px solid #0091D8; 刻 图 片 加 边框 */ 
} 


4. 浏览 网 页 
在 浏览 器 中 浏览 已 制作 完成 的 页 面 ， 页 面 的 显示 效果 如 图 8-1 所 示 。 


纵向 导航 菜单 的 设计 


8.2.1 案例 分 析 


【案例 展示 】 使 用 CSS 设置 纵向 导航 菜单 的 基本 知识 制作 “产品 中 心 ” 页 面 的 左 侧 导 航 菜 
单 ， 本 例文 件 8-2.html 在 浏览 器 中 的 显示 效果 如 图 8-8 所 示 。 


HTML5+CSS3 网 页 设计 基础 


© OfieWWE/Aa 广 : 


图 8.8 “产品 中 心 ”页 面 的 左 侧 导航 


【知识 要 点 】 普 通 的 链接 导航 菜单 、 纵 向 列表 导航 菜单 。 
【学 习 目标 】 掌 握 使 用 CSS 设置 纵向 导航 菜单 的 常用 方法 。 


8.2.2 ”纵向 导航 菜单 


普通 的 链接 导航 菜单 的 制作 比较 简单 ， 主 要 采用 将 文字 链接 从 “ 行 级 元 素 ” 变 为 “ 块 级 元 
素 ” 的 方法 来 实现 。 

【 例 8-2-1】 制 作 超 链接 导航 菜单 ， 当 鼠标 未 悬 停 在 菜单 项 上 时 的 效果 如 图 8-9 所 示 ， 鼠 标 
悬 停 在 菜单 项 上 时 的 效果 如 图 8-10 所 示 。 


C LOfeWE/- 女 | : 


图 8-9 ”鼠标 未 悬 停 时 的 超 链接 导航 菜单 图 8-10 ”鼠标 悬 停 时 的 超 链接 导航 菜单 


页 面 文件 8-2-1 html 的 关键 代码 如 下 。 
<head> 

<meta charset="utf-8"> 

<title> 超 链接 导航 菜单 </title> 

<style type="text/css"> 
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#menu { 
font-family:Arial: 
font-size:14px: 
font-weight:bold: 
width:100px: 


margin:0 auto; 
border: 1px solid #ccc:; 

} 

#menu a, #menu a:visited{ 
display:block: 
padding:4px 8px: 
Color:#333; 
text-decoration:none; 
border-top:8px solid #69f: 
height:lem; 

} 

#menu a:hover{ 
Color:#63f: 
border-top:8px solid #63£: 

b 

</style> 
</head> 
<body> 
<div id="menu"> 

<a href="#"> 首 页 </a> 

<a hre 伍 "#"> 关 于 </a> 

<a hre 仁 "加 > 客服 </a> 

<a hre 仁 "# 人 > 联系 </a> 
</div> 
</body> 


8.2.3 ”案例 一 一 制作 产品 中 心 页 面 的 左 侧 导 航 


. 网 页 结构 
在 页 面 中 创建 一 个 包含 无 序列 表 的 div 容器 ， 该 容器 包含 一 个 列表 ， 其 中 列表 又 包含 若干 
列表 项 ， 每 个 列表 项 中 包含 一 个 用 于 实现 导航 菜单 的 文字 链接 。 
网 页 结构 文件 
在 当前 文件 夹 中 ， 新 建 一 个 名 为 8-2.html 的 网 页 文件 ， 代 码 如 下 。 
<body> 


<div id="content-left"> 
<Ul> 


D 
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<li class="tp'> 产 品 中 心 <i> 
<li><a hre 仁 ">LED 景观 路 灯 </a>&nbsp: &nbsp:&nbsp:&nbsp:&nbsp:&nbsp:<img 
src="img/triangle-icon-blue png"/></li> 
<li><a hre 仁 ">LED 射 灯 </a></li> 
<li><a hre 仁 ">LED 需 虹 灯 </a></li> 
<li><a hre 人 ">LED 瓦楞 灯 </a></li> 
<li><a hre 仁 ">LED 数码 灯 </a></li> 
<li><a hre 仁 ">LED 点 光源 </a></li> 
<li><a hre 仁 ">LED 墙角 灯 </a></li> 
<li class="yj"></li> 
<l> 
<div> 
<lbody> 


3. 设置 容器 及 列表 的 样式 


在 css 文件 夹 中 创建 外 部 样式 文件 8-2.css, 设置 菜单 div 容器 的 样式 、 菜单 列表 及 列表 项 的 
样式 ， 代 码 如 下 。 
*{ 证 设 置 默 认 样 式 */ 


margin:0; 
padding:0: 
} 
证 二 级 页 面 中 间 - 左 侧 样式 */ 
#content-left{ 
width:250px: 
heightauto; 店 自 动 默认 高 度 */ 
margin:10px: 上 # 外 边 距 为 10px*/ 
} 
片 设置 左 侧 纵向 导航 菜单 的 样式 */ 
#content-left ul{ 
list-style:none: 让 不 显示 项 目 列表 符号 */ 
width:250px; 


background:#fFF 请 白色 背景 */ 
border-radins:10px: 。“”* 圆 角 半 径 为 10px */ 


margin:0 auto: 刻 上 下 外 边界 为 0， 左右 根据 宽度 自 适应 相同 的 值 ( 即 居中 )*/ 
#content-left ul li{ 证 设置 列表 项 的 样式 */ 

width:170px: 证 宽度 为 170px， 加 上 左 内 边 距 80px， 正 好 为 250px*/ 

height: SOpx: 


margin-bottom:1px; ”放下 外 边 距 为 1px*/ 
padding-left:80px : 。”* 左 内 边 距 为 80px*/ 


background:#DDDDDD : 

font-size:14px: 

line-height:55px: 上 # 行 高 为 55px*/ 
text-align:left: 族 文 字 左 对 齐 */ 
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片 需要 单独 控制 的 列表 项 ， 第 一 个 和 最 后 一 个 列表 项 的 样式 */ 
#content-left ul tp{ 
font-size:18px: 
font-weight:500; 
Padding:Opx: 片 内 边 距 为 Opx*/ 
text-align:center: 
width:250px: 
height:65px; 
line-height:80px ; 
background: #BBB; 
border-radius:10px 0 0 0: 目 左 上 圆 角 半径 为 10px， 其 他 角 为 直角 */ 
} 
#content-left ul .yj{ 
height:20px: 
border-radius:0 0 0 10px: 人 # 左 下 圆 角 半 径 为 10px， 其 他 角 为 直角 志 
margin-bottom:5px : 刻下 外 边 距 为 5px*/ 
} 
设置 容器 及 列表 的 CSS 样式 之 后 ,菜单 项 的 显示 效果 并 不 理想 ， 还 需要 进一步 美化 。 接 下 
来 设置 菜单 项 超 链 接 和 鼠标 悬 停 链接 的 样式 ， 代 码 如 下 : 
#content-left ul li alink #content-left ul li a:visited{ 
Color:#333; 
text-decoration:none; * 不 要 下 夯 线 */ 
} 
#content-left ul li a:hover{ 
color: #0091D8; 
} 


4. 浏览 网 页 
在 浏览 器 中 浏览 制作 完成 的 页 面 ， 页 面 的 显示 效果 如 图 8-8 所 示 。 


横向 导航 菜单 的 设计 


8.3.1 案例 分 析 

【案例 展示 】 使 用 CSS 设置 横向 导航 菜单 的 基本 知识 制作 产品 列表 中 的 分 页 导航 按钮 ， 本 
例文 件 8-3.html 在 浏览 器 中 的 显示 效果 如 图 8-11 所 示 。 

【知识 要 点 】 导 航 菜单 的 横竖 转换 、 横 向 列表 导航 菜单 。 

【学 习 目标 】 掌 握 使 用 CSS 设置 横向 导航 菜单 的 常用 方法 。 
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己 | 加 | 区 
口 55 x 十 


C © 127.0.0.18020/AladLed/chapter08/8-3.html? .. 会 


| | 加 上 图 加 | 四 | 回回 | 可 


8-11 分 页 导航 按钮 的 显示 效果 


8.3.2 ”网 站 主导 航 菜单 的 设计 


在 保持 原 有 HTML 结构 不 变 的 情况 下 , 可 以 将 纵向 导航 转变 成 横向 导航 , 其 中 最 重要 的 环 
节 就 是 设置 <li> 标 签 为 浮动 标签 。 下 面 通过 网 站 导航 菜单 的 设计 进行 讲解 。 

【 例 8-3-1】 制 作 横向 列表 样式 的 导航 菜单 。 本 例文 件 8-3-1.html 在 浏览 器 中 的 显示 效果 如 
图 8-12 所 示 ， 当 鼠标 指向 导航 链接 时 的 显示 效果 如 图 8-13 所 示 。 


SE 慨 | 
[be x + 
CC © 1270018020/AladLed/chapter08/8-3-1html?_hbt=1556590542941 胡 
首页 产品 中 心 工程 案例 新 闻 动态 招商 加 盟 关于 我 们 联系 方式 
图 8-12 横向 导航 菜单 的 显示 效果 
ES] 
[ee x [证 
和 © © 127.0.0.1:8020/AladLed/chapter08/8-3-Lhtml?_hbt=1556590542941# 廊 
首页 产品 中 工程 案例 新 闻 动态 招商 加 盟 关于 我 们 联系 方式 
127.0.0,1:8020/AladLed/chapter08/8-3-1.html?_hbt=1556590542941# 


图 8-13 ”鼠标 悬 停 时 横向 导航 菜单 的 显示 效果 


(1) 首先 设计 网 页 结构 文件 , 导航 利用 HTMLS5 提供 的 <nav> 标 签 实现 , 页 面 文件 代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title> 横 向 导航 菜单 <jtitle> 
<link href="css/8-3-1.css" type="text/css" rel="stylesheet" > 
</head> 
<body> 
<nav> 
<ul> 
<li><a href=" "> 首页 </a></li> 
<li><a hre 人 =" "> 产品 中 心 </a></l> 
<li><a href=" "> 工程 案例 </a></li> 
<li><a hre 人 =" "> 新 闻 动 态 </a></l> 
<li><a hre 伍 " "> 招商 加 盟 </a></ti> 
<li><a hre 伍 " "> 关于 我 们 </a></t> 
<li><a hre 伯 " "> 联系 方式 </a></li> 
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</nav> 
<body> 
(2) 然后 创建 外 部 样式 文件 8-3-1.css。 
定义 容器 及 列表 的 样式 ， 代 码 如 下 。 


* {inargin:0; padding:0:} 

nav{ 
margin-bottom:Spx; 
text-align:center:; 
width:1050px: 
height:36px; 

人 # 定 义 渐变 背景 和 
background-image:linear-gradient(0deg.#9cf#fFF 60%.#9cf 100%): 

border-bottom: 1px solid #DBEAEE:; 
border-top: 1px solid #DBEAEE;: 

} 

navul { 店 设 置 菜单 列表 的 样式 */ 
list-style-type:none; 证 不 显 示 项 目 符号 */ 

} 

navulli{ 人 # 设 置 菜单 列表 项 的 样式 六 
display:inline; 上 证 内 联 元 素 */ 
line-height:36px: 刻 行 高 为 36px*/ 

} 

设置 菜单 项 超 链 接 的 样式 ， 代 码 如 下 。 

navulli af 
display:block: 片 块 级 元 素 */ 
width:90px: 
height:36px: 
float:left: 刻 向 左 浮动 */ 


padding:0px 8px 0px 8px; ”上 、 右 、 下 、 左 内 边 距 依次 为 0px、8px、0px、8px*/ 
margin:0 10px 0 20px: 上 # 上 、 右 、 下 、 左 外 边 距 依次 为 Opx、10px、0px、20px*/ 


text-decoration:none: /# 链 接 无 修饰 所 
text-align:center: 证 文字 居中 对 齐 */ 
font-family:tahoma: 
font-size:14px: 
font-weight:bold: 证 字体 加 粗 */ 
} 
nav ul linth-child(1)a{ 证 设置 第 一 个 导航 菜单 项 “首页 ”的 宽度 为 50px*/ 
width: 50px: 


} 
定义 链接 样式 ， 当 鼠标 悬 停 时 ， 变 换 背 景 和 文本 颜色 ， 代 码 如 下 。 


navullia:link nav ullia:visited { ”定义 普通 链接 、 访 问 过 的 链接 的 样式 */ 
Color:#333:; /# 浅 黑色 文字 ?/ 
} 
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nav ul lia:active.nav ullia:hover { ，”/# 激 活 链 接 和 悬 停 链接 的 样式 六 
color#FFF: A 自 色 文字 */ 
background-image:linear-eradient(0deg.#36c.#9CF 60%.#ffF 100%): 

» 


(3) 在 Chrome 浏览 器 中 浏览 网 页 ， 显 示 效 果 如 图 8-12 和 图 8-13 所 示 。 


8.3.3 ”案例 一 一 制作 产品 中 心 页 面 的 页 码 导 航 
1. 网 页 结构 文件 


在 当前 文件 夹 中 ， 新 建 一 个 名 为 8-3.html 的 网 页 文件 ， 关 键 代 码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title> 分 页 导航 </title> 
<link href="css/8-3.css" type="text/css" rel="stylesheet"> 
</head> 
<body> 
<div class="page"> 
<h> 
< 
<li><a href="">&laquo:</a></l> 
<li><a href="">&#8249;</a></li> 
<li><a hre="">1</a></li> 
<li><a hre="">2</a></l> 
<li><a hre="">3</a></l> 
<li><a href="">4</a></l> 
<li><a hre 人 ="">5</a></l> 
<li><a hre="">6</a></li> 
<li><a hre="">&#8250:</a></li> 
<li><a href="">&raquo:</a></li> 
</ul> 
</div> 
</body> 


2. 设置 容器 、 列 表 和 超 链 接 的 样式 


创建 外 部 样式 文件 8-3.css， 设 置 页 码 导 航 div 容器 的 样式 、 导 航 列表 及 列表 项 的 样式 。 
首先 设置 div 容器 和 无 序列 表 的 样式 。 

Tage{ 

clear:both: 

text-align:center: 

padding:15px 0 ; 

有 

page ul{ 

margin-top:10px: 谍 上 外 边 距 为 10px*/ 


2 这 
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-pagelif 

display:inline: 片 在 一 行 上 显示 */ 

} 

在 设置 容器 及 列表 的 CSS 样式 之 后 , 导航 列表 项 的 显示 效果 并 不 理想 , 还 需要 进一步 美化 ， 
接 下 来 设置 导航 列表 项 未 访问 过 链接 及 鼠标 悬 停 链接 的 样式 ， 代 码 如 下 。 

.page af 

display:inline-block 

width:20px: 

height:20px; 

border: 1px solid #0091D8; 

font-size: 14px; 

text-align:center; 

line-height:20px: 

font-family:" 宋 体 "; 

} 

-page li:nth-child(3) af 计 为 第 三 个 元 素 加 背景 */ 

backeground-color:#0091D8; 

ly 

page aihover{ 让 设置 鼠标 悬 停 时 的 背景 色 */ 

background-color#fDDD: 

} 


3. 浏览 网 页 
在 浏览 器 中 浏览 已 制作 完成 的 页 面 ， 页 面 的 显示 效果 如 图 8-11 所 示 。 


EE 到 实 训 


【 实 训 任务 】 制 作 网 站 二 级 页 面 “ 产 品 中 心 ”页 面 ， 本 例文 件 8-4.html 在 浏览 器 中 的 显示 效 
果 如 图 8-14 所 示 。 

【知识 要 点 】 设 置 链接 样式 、 列 表 样式 与 导航 菜单 样式 。 

【 实 训 目 标 】 掌 握 综合 使 用 CSS 设置 链接 、 列 表 与 导航 菜单 的 方法 。 


8.4.1 任务 分 析 


1. 页 面 结构 分 析 


页 面 布局 的 首要 任务 是 弄 清楚 网 页 的 布局 方式 , 分 析 版 式 结构 。 本 例 页 面 为 两 列 固定 布局 ， 
自 上 向 下 分 成 头 部 、 主 导航 菜单 、 页 面 主体 和 页 面 底部 四 部 分 。 主 体内 容 包 括 左 侧 的 产品 中 心 
导航 列表 和 右 侧 的 景观 路 灯 展 示 内 容 。 
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Alalel 和 方向 | 入 到 天 示 | 会员 注册 
照明 材料 


低 碳 之 选 . 绿色 生活 


仿古 锥 形 广场 景观 灯 柱 莫 仿 洲 型 广场 景观 杂 柱 


EF 


内 选 光 方 柱 辕 观 灯 现代 压 习 庭院 时 观 亲 古典 浮 台 祥云 因 现 灯 柱 立柱 仿 云 石 LED 早 观 灯 


Col Sess 


图 8-14 产品 中 心 页 面 


2. CSS 样式 分 析 


(1) 整个 页 面 的 布局 由 header、nav、div 和 footer 进行 分 块 。 

(2) 中 部 div 嵌 套 左 侧 的 aside 和 右 侧 的 div。 

(3) 景观 路 灯 用 无 序列 表 实 现 ， 将 无 序列 表 项 定义 为 向 左 浮动 。 

(4) 翻 页 导航 按钮 用 无 序列 表 实 现 ， 将 无 序列 表 定义 为 在 一 行 上 显示 。 


3. 准备 素材 
将 本 页 面 需 要 使 用 的 图 像素 材 和 字体 文件 分 别 存放 在 文件 夹 img 和 font 下 。 


8.4.2 ”任务 实现 
根据 上 面 的 分 析 ， 创 建 网 页 文件 和 外 部 样式 文件 。 
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1. 创建 页 面 文件 


(1) 启动 HBuilder， 在 当前 项 目 中 新 建 HIMLS 文档 ， 文 件 名 为 8-4.html。 
(2) 在 HBuilder 编辑 区 编辑 文件 ， 页 面 文件 结构 代码 如 下 。 


<!IDOCTYPE html> 
<html> 
<head> 
<meta charset utf8" > 
<link hre 合 "CSS/8-4.css" rel="stylesheet" type="text/css"> 
<title> 产 品 中 心 <title> 
</head> 
<body> 
<header> 
<img class="header-left" src="img/logo.png" width="100" height="50"> 
<div class="header-right"> 
<a hre 伍 "#"><img src="img/wechatl.png" 户 官方 微 信 </a>&nbsp:<span style="color:#930"> | 
</span> 
<a href=" " target=”blank"> 管 理 员 登 录 </a>&nbsp:<span style="color:#930">|</span> 
<a href=" " target=”blank"> 会 员 注册 </a> 
</div> 
<div class="header-text"> 照 明 材 料 </div> 
</header> 
<nav> 
< 
<li><a href=" "> 首页 </a></li> 
<li><a kre 全" "> 产品 中 心 </a></li> 
<li><a href=" "> 工程 案例 </a></li> 
<li><a hre 人 =" "> 新 闻 动态 </a></li> 
<li><a href=" "> 招商 加 盟 </a></li> 
<li><a hre 合 " "> 关于 我 们 </a></li> 
<li><a href=" "> 联系 方式 <a></i> 
<ul> 
</nav> 
<div id="content"> 
<aside id="content-left"> 
<0U> 
<liclass="pp"> 产 品 中 心 <> 
<li><a hreE-"">LED 景观 路 灯 </a>&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:<img stc= 
"img/triangle-icon-blue png"/></li> 
<li><a hre 全 ">LED 射 灯 </a></li> 
<li><a hre 仁 ">LED 需 虹 灯 </a></li> 
<li><a hre 仁 ">LED 瓦楞 灯 </a></li> 
<li><a hre 人 ">LED 数码 灯 </a></li> 
<li><a hre 仁 ">LED 点 光源 <a></li> 
<li><a hre 仁 ">LED 墙角 灯 <a></li> 
<liclass="yj"></> 
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< 


</aside> 
<div id="content-right"> 
<div class="tt"> 


<h3> 景 观 路 灯 </h3> 


</div> 
<div id="article"> 


<div class="products"> 
< 
<li><a href=" "><img src="img/led jgdljpg"><br> 
仿古 锥 形 广场 景观 灯 柱 </a> 
<> 
<li><a href=""><img ste="img/led jgd2jpg"><br> 
铁 空 方 柱 形 景观 灯 柱 </a> 
< 
<li><a href=""><img strc="img/led jgd3jpg"><br> 
多 头 造 型 LED 景观 灯 </a> 
</> 
<li><a href=""><img sre="img/led jed4jpe"><br/> 
莲花 造型 广场 景观 灯 柱 </a> 
</> 
<li><a href=""><img src="img/led jgd5jpg"><br> 
内 透 光 方 柱 景观 灯 </a> 
</> 
<li><a href=""><img src="img/led jgd6.jpe"><br/> 
现代 园林 庭院 景观 灯 </a> 
<Ni> 
<li><a href=""><img stc="img/led jgd7jpg"><br> 
古典 浮雕 祥云 景观 灯 柱 </a> 
</> 
<li><a href=""><img src="img/led jgd8jpg"><br> 
立柱 仿 云 石 LED 景观 灯 </a> 
</> 
< 
</div> 
<div class="page"> 
<hr> 
<u> 
<li><a href=">&laquo:</a></li> 
<li><a href="">&#8249:</a></l> 
<l><a hre="">1</a></l> 
<li><a hreE="">2</a></l> 
<li><a hreE"">3</a></> 
<l><a hreE"">4</a></l> 
<li><a hreE"">5</a></> 
<li><a href="">6</a></1> 
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<li><a href—="">&#8250:</a></li> 
<li><a href="">&raquo:</a></I> 


<p class="link"> 
<a href=" "> 网 站 首页 </a>| <a href=" "> 产品 中 心 <la>|<a bre 全" "> 
联系 方式 </a>|<a href=" "> 新 闻 动态 </a> 


So 
<p> 地 址 : 山东 省 日 照 市 学 苑 路 爱 德 照明 科技 有 限 公司 <p> 
</footer> 
<lbody> 
<html> 
(4) 创建 外 部 样式 表 。 在 文件 夹 css 下 新 建 一 个 名 为 8-4.css 的 样式 表 文件 。 
页 面 的 主体 、 链 接 和 标题 的 CSS 定义 代码 如 下 。 


@charset "utf-8"; 

St /# 针 对 所 有 的 HTML 元 素 定义 样式 */ 
margin:0; 旋 外 边 距 为 0px*/ 

padding:0; 刻 内 边 距 为 Opx*/ 
box-sizing:border-box: 让 盒子 的 宽度 值 和 高 度 值 包含 元 素 的 内 边 距 和 边框 */ 

} 

af 上 # 设 置 超 链接 的 样式 %/ 
text-decoration:none; /无 修饰 9 

让 

body{ 人 # 设 置 页 面 的 整体 样式 %/ 
width:1050px: 启 宽 度 为 1050px*/ 
margin:0 auto; 上 # 页 面 自动 居中 对 齐 六 
font-family: "微软 雅 黑 "; 让 字体 为 "微软 雅 黑 "*/ 
font-size:13px: 人 # 文 字 大 小 为 12px*/ 
color#333: 让 文字 颜色 为 灰色 */ 
position:relative 让 相对 定位 */ 

} 

3{ /*h4 标题 的 样式 */ 
font-size:16px: 
color #545861: 让 文字 颜色 为 浅 灰色 */ 
font-weight:500; 上 文字 粗细 为 500*/ 

3 

上 # 网 页 头 部 的 CSS 样式 开始 */ 

header { 
height:250px: 刻 高 度 为 250px*/ 
background-color-#FFFFEE: /# 背 景 颜色 所 
background-imageurl(./img/bannerjpg): 。 ”背景 图 片 */ 
background-repeat:no-repeat: 让 背景 图 片 不 平 铺 */ 
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background-position:center S0px: 片 背 景 图 片 位 置 ， 左 右 居中 ， 离 顶部 50px*/ 

} 

.header-left{ 
height: SO0px: 证 高 度 为 50px*/ 

} 

‘header-right{ 
width:250px: 
heightS0px: 
line-heights0px: 庆 行 高 为 50px*/ 
float:right: 证 向 右 浮动 */ 

} 

‘header-right img{ 
width:25px; 
height: 21px; 

} 

‘header-right a:link. header-right avisited{ 证 普通 链接 和 访问 过 的 链接 的 样式 */ 
text-decoration: none: 证 文本 无 修饰 */ 
color:#111111; 

} 

‘header-right a:active,. header-right a:hover{ /# 激 活 链接 和 悬 停 链接 的 样式 所 
color:blue; 

header-text{ 证 文 字样 式 */ 
font-size: 40px: 
color: #4FACO0:; 
margin-top: 10px; 
margin-left: 150pX: 

} 

证 网 页 头 部 的 CSS 样式 结束 */ 

片 导航 栏 样式 开始 */ 

nav{ 
margin-bottom:Spx; 
height:36px: 
background-image: linear-gradient(0deg.#9cf#ffF 6096#9cf 100%); 

border-bottom: 1px solid #DBEAEE: 
border-top: 1px solid #DBEAEE: 

} 

navul { 全 设置 菜单 列表 的 样式 %/ 
list-style-type:none;: 。 /# 不 显示 项 目 符号 所 

} 

navulli{ 让 设置 菜单 列表 项 的 样式 */ 
display:inline: 店内 联 元 素 */ 
line-height:36px: 上 # 行 高 为 36px*/ 

} 

navulli af{ 
display:block: 片 块 级 元 素 */ 
width:90px: 
height:36px: 
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float:left: 此 向 左 浮动 */ 
padding:0px 8px 0px 8px: ”让 上 、 右 、 下 、 左 内 边 距 依 次 为 0px、8px、0px、8px*/ 
margin:0 10px 0 20px: 上 # 上 、 右 、 下 、 左 外 边 距 依次 为 Opx、10px、0px、20px*/ 


text-decoration-none; 片 链接 无 修饰 */ 
text-align:center: 证 文字 居中 对 齐 */ 
font-family:tahoma:; 
font-size:14px: 
font-weight:bold: 片 字体 加 粗 */ 
} 
nav ul linth-child(1)a{ 上 # 设 置 第 一 个 导航 菜单 项 “首页 ”的 宽度 为 50px*/ 
width:S0px: 


} 


nav ul li a:link, nav ul li avisited { 让 定义 普通 链接 、 访 问 过 的 链接 的 样式 */ 
color:#333; 记 浅 黑色 文字 */ 

nav ul li a:active.nav ul li a:hover { 证 激活 链接 和 县 停 链 接 的 样式 */ 
color-#FFF: 户 白 色 文字 
background-image:linear-gradient(0deg.#36c.#9CF 60%,#ffF 100%); 


)) 

片 导航 栏 样式 结束 */ 

店 网 页 中 部 内 容 样式 开始 */ 

#content{ 
width:1050px; 
height:auto; 让 自动 默认 高 度 */ 

} 

店 二 级 页 面 中 间 - 左 侧 样式 */ 

#content-left{ 
width:250px: 
height:auto: 让 自动 默认 高 度 */ 
float:left: 证 向 左 浮动 */ 

} 

证 设置 左 侧 纵向 导航 菜单 的 样式 */ 

#content-left ul{ 
list-style:none; 人 # 不 显示 项 目 列表 符号 所 
width:250px: 
background-#ffF: 刻 白 色 背 景 */ 
border-radius: 10px: 刻 圆 角 半 径 为 10px */ 
margin:0 auto: 人 # 上 下 外 边界 为 0， 左右 根据 宽度 自 适应 ( 即 居中 )#/ 

#content-left ul li{ 片 设 置 列表 项 的 样式 */ 
width:250px: 
height50px: 


margin-bottom: 1px: 人 # 下 外 边 距 为 1px*/ 
padding-left:80px : /# 左 内 边 距 为 80px*/ 
background:#DDDDDD : 

font-size:14px: 

line-height:55px: 证 行 高 为 55px*/ 
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text-align:left: /# 文 字 左 对 齐 世 
} 
#content-left ul li alink #content-left ul li a:visited{ 
Color:#333; 
} 
#content-left ul li a:hover{ 
color: #0091D8; 


语 需 要 单独 控制 的 列表 项 ， 第 一 个 和 最 后 一 个 列表 项 的 样式 */ 
#content-left ul .tp{ 
font-size:18px: 
font-weight:500; 
padding:0px ; 府内 边 距 为 0px*/ 
text-align:center; 
Width:250px: 
height:65px: 
line-height:80px ; 
background: #BBB: 
border-radius:10px 000; ”/* 左 上 圆 角 半径 为 0px， 其 他 角 为 直角 */ 
5 
#content-left ul .yj{ 
height:20px; 
border-radius:000 10px: 。“”/* 左 下 圆 角 半径 为 1 0px， 其 他 角 为 直角 */ 
Iargin-bottom:Spx ; 让 下 外 边 距 为 5px*/ 
b 


片 二 级 页 面 中 间 - 左 侧 样式 结束 */ 
店 二 级 页 面 中 间 - 右 侧 样式 */ 
#content-right{ 
float:right; 
width:800px: 
height:auto; 
} 
#content-right tt{ 
height:40px: 
width:785px: 
margin-left:15px : 人 # 左 外 边 距 为 15px*/ 
border-bottom:2px solid #D6D6D6; /* 下 边框 样式 ， 用 下 边框 实现 水 平 线 效果 */ 
} 
#content-right h3{ 
font-weight:500; 
font-size: 16px : 
border-bottom:2px solid #0091D8; ”人 * 下 边框 样式 ， 用 下 边框 实现 标题 下 面 的 横 线 效果 */ 
width:90px: 片 标题 空间 宽度 为 90px*/ 
padding:10px 0 7px Spx: 上 # 上 、 右 、 下 、 左 内 边 距 分 别 为 10px、0、7pX、SpX4/ 
} 
#content-right #article{ 
width:800px: 
height:auto; 
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由 

包产 品 中 心 页 面 ， 产 品 样式 定义 开始 所 

#content-right #article products{ 
width:800px: 

#article .products ul{ 
list-style:none: 

} 

#article products ul li{ 
width:180px: 
height:210px: 
float:left: 
margin: 10px; 
font-size: 14px ; 
text-align:center: 

} 

#article .products ul li img{ 
width: 180px: 
height:180px: 
Iargin:10pX: 

#article .products ul li ahover { 
color:#0091D8; 

} 

#article .products ul li a:hover img{ 
border:2px solid #0091D8; 


} 

证 分 页 导航 样式 */ 
#article .page{ 

clear:both: 
text-align:center; 
padding:15px 0 ; 

y 

#article .page ul{ 
margin-top:10px; 人 * 上 外 边 距 为 10px*/ 
} 

#article .page li{ 
display:inline: 上 # 在 一 行 上 显示 所 
有 

#article .page af 
display:inline-block: 
width:20px: 

height:20px: 

border: 1px solid #0091D8: 
font-size: 14px: 
text-align:center: 
line-height:20px: 
font-family: "宋体 "; 
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| 

#article page linth-child(3) af ”/* 为 第 三 个 二 元 素 加 背景 */ 
background-color#0091D8: 

} 

#article page ahover{ 人 # 设 置 鼠标 悬 停 时 的 背景 色 #/ 

background-color #DDD: 


} 
入 产品 中 心 页 面 ， 产 品 样式 定义 结束 所 
启 footer 样式 开始 */ 


footer{ 

clearboth: 片 清除 两 侧 浮动 */ 
width:100%; 上 # 宽 度 为 100%， 即 1050px*/ 
height:100px: 
background:#545861; 
border-bottom: 1px solid #ffF: 人 #* 下 边框 为 1px 的 白色 实 线 */ 
color#ffPPFF 让 白色 文字 */ 
text-align:center: 上 文字 水 平 居中 所 

则 
padding-top:25px : 让 上 内 边 距 为 25px*/ 

D 

footer .link a{ 
display:inline-block: 刻 内 联 元 素 */ 
Width:70px: 
height:36px: 
color ff 
padding:0px 8px Opx 8px: 让 上 、 右 、 下 、 左 内 边 距 依次 为 Opx、8px、0px、8px*/ 
margin:0 14px 0 14px: 让 上 、 右 、 下 、 左 外 边 距 依 次 为 Opx、14px、0px、14px*/ 
text-decoration:none; /# 链 接 无 修饰 %/ 
text-align:center: 语文 字 居中 对 齐 */ 

} 

footer .link a:hover { 片 鼠标 悬 停 链 接 的 样式 */ 
color#CCC: 上 # 浅 灰色 文字 4 
textrdecoration:underline: 店 下 夯 线 修饰 */ 

} 

店 footer 样式 结束 */ 


(5) 在 浏览 器 中 浏览 制作 完成 的 页 面 ， 页 面 显 示 效果 如 图 8-14 所 示 。 

【 实 训 说 明 ]G) 本 例 介 绍 了 网 站 中 产品 中 心 页 面 的 制作 , 重点 练习 综合 使 用 CSS 设置 链接 、 
列表 与 导航 菜单 的 技术 。 

(2) 在 定义 全 局 样式 的 代码 中 , 语句 “box-sizing:border-box; ”设置 盒子 的 宽度 值 和 高 度 值 ( 包 
含 元 素 的 内 边 距 和 边框 )。 

默认 情况 下 ， 在 CSS 中 设置 一 个 元 素 的 width 与 height 属 性 时 ， 属 性 值 只 包括 这 个 元 素 的 内 
容 空间 ， 不 包括 border 和 padding， 盒 子 的 实际 宽度 和 高 度 会 加 上 它 的 边框 和 内 边 距 。 当 调整 
一 个 元 素 的 宽度 和 高 度 时 ， 需 要 时 刻 注意 这 个 元 素 的 边框 和 内 边 距 ， 否 则 布局 设计 容易 混乱 。 
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使 用 “box-sizing:border-box;” 属 性 告诉 浏览 器 ,设置 的 边框 和 内 边 距 的 值 是 包含 在 宽度 内 
的 ， 这 样 布局 设计 更 容易 实现 。 


本 章 小 结 


本 章 首 先 介绍 了 如 何 使 用 CSS 设置 文字 链接 样式 与 图 像 链接 样式 ， 然 后 讲解 了 如 何 使 用 
CSS 设置 纵向 导航 菜单 与 横向 导航 菜单 ， 最 后 通过 使 用 CSS 设置 链接 与 导航 的 方法 , 制作 出 常 
见 的 LED 网 站 产品 中 心 页 面 。 

通过 本 章 的 学 习 ， 读 者 应 该 能 够 将 网 页 中 的 链接 与 菜单 以 各 种 形式 体现 在 网 页 中 ， 可 以 熟 
练 地 使 用 CSS 来 设置 链接 与 导航 菜单 。 


E39 练习 题 


1. 综合 使 用 链接 和 导航 菜单 技术 制作 如 图 8-15 所 示 的 页 面 。 


TEA & MEAL 


TASTE THE BEST MEAL WITH THE BEST TEA. 


西湖 牛肉 紫 荣 包 饭 


其 皮 厚 ， 筷 认 ， 胶 质 重 ， 伤 丙 夫 向 带 


Copyright © 2011 wuyuze | Designed by wf 
8-15 ”练习 题 1 效果 图 
2. 综合 使 用 链接 和 导航 菜单 技术 制作 如 图 8-16 所 示 的 页 面 。 
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Make life happier » Whywemadeit» Known the process » Takeatoury 
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We nmde Resbonsive design Complete pack of business idea Simple, Efficient, and Low cost 
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EE de 人 


Am 9 bout Hyperion 
Jakarta, JKT 122 
PO BOX 1234 


Phone : +621 55566671 


Email : in ncom 
e Program 


8-16 ”练习 题 2 效 果 图 
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表单 是 HTML 网 页 中 的 重要 元 素 ， 是 允许 用 户 输入 信息 的 区 域 。 用 户 输入 信息 后 ， 将 信息 
发 送 给 服务 端 程序 处 理 ， 从 而 实现 网 上 注册 、 登 录 和 交易 等 多 种 功能 。 本 章 将 对 表单 控件 和 属 
性 及 其 用 法 进行 详解 。 

本 章 的 学 习 目 标 : 

e。 了 解 表 单 功能 ， 能 够 快速 创建 表单 。 

e 掌握 表单 相关 元 素 ， 能 够 准确 定义 不 同 的 表单 控件 。 

。 掌握 表单 样式 的 控制 ， 能 够 美化 表单 界面 。 


| 表单 标签 


在 HIML 中 ，<form> 标 签 用 来 定义 表单 ， 即 创建 表单 。 表 单 中 可 以 包含 多 个 表单 元 素 ， 用 
来 实现 用 户 信 息 的 收集 和 传递 。 

创建 表单 的 基本 语法 格式 如 下 。 

<form name=" 表 单 名 " action="URL" method="get/post" autocomplete="on/off' > 

各 种 表单 元 素 控件 

</form> 

<formm> 标 签 中 常用 属性 的 含义 如 下 。 

e@ name: 给 定 表 单 名 称 ， 对 表单 命名 之 后 就 可 以 用 脚本 语言 (如 JavaScript 或 VBScripbD 对 
它 进 行 控制 。 

e action: 指定 处 理 表单 信息 的 服务 器 端 应 用 程序 。 

e method， 指定 表单 数据 的 提交 方式 ，method 的 值 可 以 为 get 或 post， 默 认 值 是 get。 采 
用 get 方 式 提交 的 数据 将 显示 在 浏览 器 的 地 址 栏 中 ， 保 密 性 差 ， 且 有 数据 量 的 限制 ; 而 
post 方式 的 保密 性 好 ， 并 且 无 数据 量 的 限制 。 

e@ autocomplete: 指定 表单 是 否 有 自动 完成 功能 。 取 值 为 on 时 ,表单 有 自动 完成 功能 。 取 
值 为 of 时 ， 表 单 无 自动 完成 功能 。 


HTML5+CSS3 网 页 设计 基础 


【 例 9-1-1] 创建 登录 表单 。 本 例 在 浏览 器 中 的 显示 效果 如 图 9-1 所 示 ， 页 面 文件 9-1-1.html 
的 关键 代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title> 登 录 表单 </title> 
</head> 
<body> 
<form name="form1" action="http://www.mysite.com/index.jsp" method="post"> 
账号 : <input type="text" name="userName"><br/><br/> 
密码 : <input type="password" name="userPwd"><br/><br/> 
&mnbsp:&nbsp:&nbsp:<input type="submit" value=" 提 交 "> 


<input type="reset" value=" 重 置 "> 
</form> 
<body> 
账号 : [admin 
宣 码 


表单 中 通常 包含 一 个 或 多 个 表单 元 素 ， 常 见 的 表单 元 素 有 input、output、select、textarea 
和 label 等 。 
9.2.1 案例 分 析 


【案例 展示 】 设 计 用 户 注 册页 面 。 使 用 表单 标签 和 表单 元 素 设计 用 户 注 册页 面 。 本 例文 件 
9-2.html 在 浏览 器 中 的 显示 效果 如 图 9-2 所 示 。 


站 用 广 注 再 x 本国 


[Ee ENE 


C @1270018020/Aa 人 女 


提交 。 | 本 顺 


9-2 用户 注册 表单 
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【知识 要 点 】 表 单 、 表 单元 素 、 表 单元 素 常用 属性 的 功能 。 

【学 习 目 标 】 掌 握 用 表单 和 表单 元 素 以 及 各 种 属性 设计 表单 的 技术 。 
9.2.2 input 元 素 及 其 属性 

input 元 素 是 表单 中 最 常见 的 元 素 ， 用 于 定义 用 户 的 输入 项 。 网 页 中 常见 的 单行 文本 框 、 单 
选 按钮 、 复 选 框 等 都 是 通过 它 定义 的 input 元 素 必须 柑 套 在 表单 标签 中 使 用 。 

input 元 素 的 基本 语法 格式 如 下 。 

<input type=" 输 入 类 型 " name=" 控 件 名 " value=" 默 认 值 " ...> 

e@ type 属性 : 指定 input 元 素 的 输入 类 型 。 

e name 属性 : 该 属性 的 值 是 相应 程序 中 的 变量 名 。 

e value 属性 : 该 属性 的 值 是 默认 的 输入 值 。 

在 HIML5 中 ，<inputf> 标 签 拥有 多 种 输入 类 型 及 相关 属性 ， 常 用 属性 如 表 9-1 所 示 。 

表 9-1 input 元 素 的 常用 属性 


属 性 描述 
[tw | 单行 文本 输入 框 
密码 输入 框 
单 选 按 乌 
复 先 杠 
提交 按钮 
重 置 按 乌 
| bm | 普通 近 钮 
| age | 图 片 校 包 
| | 六 | 碟 
type e-mail 地 址 输入 杠 
[四 | URL 地 址 输入 杠 
| | 电话 9 码 输入 杠 
数值 输入 框 
| mge | 范围 内 数字 输入 域 
date pickers(date、month、week、time 和 | 日 期 和 时 间 输 入 框 
datetime 等 ) 
color 颜色 输入 域 
search 搜索 框 
hidden 隐藏 域 
name 用 户 定义 控件 名 称 
value 用 户 定义 input 控件 的 默认 值 
Size 正 整 数 input 控件 的 显示 宽度 
maxlength 正 整数 input 控件 允许 输入 的 最 大 字符 数 
min、max、step 数值 允许 输入 的 最 大 值 、 最 小 值 和 间隔 


autocomplete ‘on/off 是 否 自动 完成 输入 
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( 续 表 ) 

属 性 属性 值 描述 
Placeholder 字符 串 input 控件 的 输入 提示 
required required 输入 框 的 内 容 不 能 为 空 
patem 字符 串 输入 内 容 的 验证 正则 表达 式 
checked checked 默认 选中 
Teadonly Teadonly 该 控件 内 容 只 读 
disabled disabled 禁用 该 控件 
autofocus autofocus 自动 获取 焦点 
multiple multiple 允许 多 选 
list datalist 标签 的 id 属性 值 指定 输入 候选 值 列表 


1. input 元 素 的 type 属性 


在 HIML5 中 ，input 元素 拥有 多 个 type 属性 值 ， 用 于 定义 不 同 的 控件 类 型 。 

(1) 单行 文本 框 

当 type="text" 时 ， 定 义 单行 文本 输入 框 ， 用 来 输入 简短 的 信息 ， 如 用 户 名 、 账 号 、 证 件 号 
码 等 。 单 行文 本 框 的 格式 为 : 

<input type="text" name=" 文 本 框 名 "> 

例如 ， 定 义 账 号 文本 输入 框 。 

账号 : <input type="text" name="userName" size="20" maxlength="32" value="admin"/> 

其 中 ,type="text" 表 示 <input> 元 素 的 类 型 为 单行 文本 框 , name="userName" 表 示 文 本 框 的 名 
称 为 userName，size="20" 表 示 文 本 框 的 宽度 为 20 个 字符 ，maxlength="32" 表 示 最 多 输入 32 个 
字符 ，value="admin" 表 示 文 本 框 的 初始 值 为 admin， 页 面 中 的 显示 效果 如 图 9-1 所 示 。 

(2) 密码 输入 框 

当 type="password" 时 ， 定 义 密码 输入 框 ， 用 来 输入 密码 ， 内 容 将 以 圆 点 的 形式 显示 ， 以 保 
证 密码 的 安全 。 密 码 框 的 格式 为 : 

<input type="password" name=" 密 码 框 名 "> 

例如 ， 定 义 密码 框 : 

密码 <input type="password" name="userPwd" size="20" maxlength="16" /> 

其 中 ,type="password" 表 示 <input> 元 素 的 类 型 为 密码 框 ， maxlength="16" 表 示 密 码 最 多 16 
个 字符 ， 页 面 中 的 显示 效果 如 图 9-1 所 示 。 

(3) 单 选 按钮 

当 type="radio" 时 ， 定 义 单 选 按 钮 ， 如 选择 性 别 、 是 否 操 作 等 ， 格 式 如 下 。 

<input type= radio" name=" 单 选 按钮 名 " value=" 提 交 值 " checked="checked"> 

其 中 ，value 属性 可 设置 单 选 按钮 的 提交 值 ，checked 属性 表示 是 否 为 默认 选中 项 ，name 属 
性 是 单 选 按钮 的 名 称 ， 同 一 组 单 选 按钮 的 名 称 必须 相同 ， 这 样 才能 实现 单 选 效果 。 
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例如 ， 选 择 “性 别 ” 单 选 按钮 的 代码 如 下 。 

性 别 : <input type="radio" name="sex" value="1" checked="checked"> 男 

<input type="radio" name="sex" value=2"> 女 

(4) 复 选 框 

当 type="checkbox" 时 ， 定 义 复 选 框 。 复 选 框 常用 于 多 项 选择 ， 如 选择 兴趣 、 爱 好 等 ， 格 式 
如 下 。 

<input type="checkbox" name=" 复 选 框 名 " value=" 提 交 值 " checked="checked"> 

例如 : 选择 “爱好 ”， 其 中 读书 和 旅游 两 个 选项 默认 被 选中 ， 代 码 如 下 ， 页 面 中 的 显示 效 
果 如 图 9-3 所 示 。 

爱好 : <input type="checkbox" name="like1" value="l" checked="checked"> 读 书 

<input type="checkbox" name="like2" value="2" checked="checked"> 旅 游 

<input type="checkbox" name="like3" value="3" > 上 网 

<input type="checkbox" name="like4" value="4" > 运动 

爱好 : 四 读书 四 旅游 日 上 网 日 运动 
图 9-3 “爱好 ”选项 

(9 提交 按钮 

当 type="submit" 时 ， 定 义 提交 按钮 ， 将 填写 到 文本 框 中 的 内 容 发 送 到 服务 器 ， 格 式 如 下 。 

<input type="submit" value=" 按 钮 名 "> 

(7) 重 置 按钮 

当 type="reset" 时 , 定义 重 置 按钮 , 单 击 重 置 按钮 可 取消 已 输入 的 所 有 表单 信息 , 格式 如 下 。 

<input type="reset" value=" 按 钮 名 "> 

(8) 普通 按钮 

当 type="button" 时 ， 定 义 普通 按钮 ， 用 于 触发 单 击 事件 。 普 通 按钮 的 格式 如 下 。 

<input type="button" value=" 按 钮 名 "> 

(9) 图 像 形式 的 提交 按钮 

当 type=“image” 时 ， 定 义 图 像 按钮 。 图 像 形式 的 提交 按钮 与 普通 的 提交 按钮 在 功能 上 基 
本 相同 ， 只 是 用 图 像 蔡 代 了 默认 的 按钮 ， 外 观 上 更 加 美观 。 图 像 按 钮 的 格式 如 下 。 

<input type="image" src=" 图 片 路 径 "> 

(10) 文件 域 

当 type="fle" 时 ， 定 义 文件 域 ， 进 行文 件 上 传 的 操作 ， 如 上 传 简历 、 上 传 照片 和 资料 信息 
等 , 用户 上 传 的 文件 将 被 保存 在 Web 服务 器 上 。 文 件 域 会 在 页 面 中 创建 “浏览 ”按钮 和 显示 选 
中 文件 信息 的 地 址 文本 框 。 文 件 域 的 格式 如 下 。 

<input type="file" name=" 文 件 域名 "> 

例如 : 制作 上 传 照片 的 表单 页 面 ， 选 择 文件 前 的 显示 效果 如 图 9-4 所 示 ， 选 择 文件 后 的 显 
示 效 果 如 图 9-5 所 示 ， 代 码 如 下 。 
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上 传 照片 : <input type="file" name= "picture"><inputtype="button" value=" 上 传 "> 
上 传 照片 : | 选择 文件 | 未 选择 任何 文件 LE 传 | 
图 9-4 选择 上 传 文件 前 


上 传 照片 : | 选择 文件 |picture jpg 上 全 | 
9-5 选择 上 传 文件 后 


(11) email 类 型 

当 type="email" 时 ， 定 义 用 于 输入 e-mail 地 址 的 文本 输入 框 。 提 交 表 单 中 的 信息 时 ， 会 验 
证 email 输入 框 的 内 容 是 否 符合 e-mail 电子 邮件 地 址 的 格式 ， 如 果 不 符合 ， 将 提示 相应 的 错误 
信息 。 格 式 如 下 。 

<input type="email'> 

(12) url 类 型 

当 type="ur" 时 ， 定 义 用 于 输入 URL 地 址 的 文本 框 。 提 交 表 单 中 的 信息 时 ， 会 验证 所 输入 
的 内 容 是 否 是 URL 地 址 格式 的 文本 ， 如 果 不 是 ， 将 提示 相应 的 错误 信息 。 格 式 如 下 。 

<input ype= url> 

(13) tel 类 型 

当 type="tel" 时 , 定义 用 于 输入 电话 号 码 的 文本 框 。tel 类 型 通常 会 和 pattern 属性 配合 使 用 ， 
验证 电话 号 码 的 格式 是 否 正确 。 格 式 如 下 。 

<input type="tel" pattem=" 正 则 表达 式 "> 

(14) number 类 型 

当 type="number" 时 ， 定 义 用 于 输入 数值 的 文本 框 。 提 交 表 单 中 的 信息 时 ， 会 验证 所 输入 的 
内 容 是 否 是 数字 ， 如 果 不 是 ， 将 提示 相应 的 错误 信息 。 

输入 框 可 以 对 输入 的 数字 进行 限制 ， 规 定 允许 的 最 大 值 、 最 小 值 、 合 法 的 数字 间隔 和 默认 
值 等 ， 格 式 如 下 。 

<input gpe= umber' max=" 最 大 数 " min=" 最 小 数 " value-" 默 认 值 "step- "数字 间隔 "> 

e@ ”value: 指定 输入 框 的 默认 值 。 

e max: 指定 输入 框 可 以 接收 的 最 大 输入 值 。 

e min: 指定 输入 框 可 以 接收 的 最 小 输入 值 。 

e@ step: 合法 的 间隔 ， 如 果 不 设 置 ， 默 认 值 是 1。 

(15) range 类 型 

当 type="range" 时 ， 定 义 提供 指定 范围 内 数值 的 输入 控件 ， 在 网 页 中 显示 为 滑动 条 。 它 的 
常用 属性 与 number 类 型 一 样 ， 通 过 min 属性 和 max 属性 可 以 设置 最 小 值 与 最 大 值 ， 通 过 step 
属性 可 以 指定 每 次 滑动 的 步 幅 。 
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(16) date pickers 类 型 
当 type="date" "month" "week" "time" "datetime" 或 "datetime-local" 时 ， 定 义 用 于 日 期 或 时 间 
的 输入 框 。 日 期 和 时 间 类 型 如 表 9-2 所 示 。 


表 9-2 日 期 和 时 间 类 型 


日 期 和 时 间 类 型 说 明 
date 选取 日 、 月 、 年 
month 选取 月 、 年 
week 选取 周 、 年 
time 选取 时 间 ( 小 时 和 分 钟 ) 
datetime 选取 时 间 、 日 、 月 、 年 (UTC 时 间 ) 
datetime-local 选取 时 间 、 日 、 月 、 年 (本 地 时 间 ) 


例如 :制作 生日 输入 框 ， 输 入 数据 前 的 显示 效果 如 图 9-6 所 示 ， 单 击 文本 框 后 的 显示 效果 
如 图 9-7 所 示 ， 代 码 如 下 。 


生日 : <input type="date"value="2000-01-02"/><or/> 
生日 :moooz_ xs] 


2000 年 01 月 ~ alells 


局 日 周 - 周二 周 = 周 四 局 五 周 六 


生日 : 2000/01/02 
图 9-6 日 期 输入 框 图 9-7 输入 日 期 
(17) search 类 型 
当 type="search" 时 ， 定 义 专门 用 于 输入 搜索 关键 词 的 文本 框 ， 它 能 自动 记录 一 些 搜索 过 的 
字符 。 在 用 户 输入 内 容 后 ， 其 右 侧 会 附带 一 个 删除 图 标 ， 单 击 这 个 图 标 可 以 快速 清除 内 容 。 格 
式 如 下 。 


<input type="search"> 


(18) color 类 型 

当 type="color" 时 ， 定 义 提供 设置 颜色 的 文本 框 ， 用 于 实现 RGB 颜色 输入 。 基 本 形式 是 # 
RRGGBB， 默 认 值 为 #000000。 通 过 value 属性 值 可 以 更 改 默 认 颜 色 。 单 击 color 类 型 文本 框 可 
以 快速 打开 失色 器 面板 ， 选 取 颜色 。 格 式 如 下 。 


<input type="color" value="#EFCC33"> 


(19) hidden 类 型 
隐藏 域 的 格式 : 


< input type=" hidden"/> 
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隐藏 域 不 在 页 面 上 显示 ， 通 常用 于 后 台 程 序 ， 读 者 了 解 即 可 。 
2. input 元 素 的 其 他 属性 


除了 type 属性 外 ，input 元 素 还 有 一 些 其 他 的 属性 ， 有 具体 如 表 9-1 所 示 。 下 面 介绍 <input> 
元 素 的 其 他 几 种 常用 属性 ， 具 体 如 下 。 

(1) autocomplete 属性 

autocomplete 属性 用 于 指定 表单 是 否 有 自动 完成 功能 。 

该 属性 有 两 个 值 , 取 值 为 on 时 , 表单 有 自动 完成 功能 , 为 表单 控件 输入 的 内 容 会 记录 下 来 ， 
当 再 次 输入 时 ， 会 将 输入 的 历史 记录 显示 在 一 个 下 拉 列 表 里 ， 以 实现 自动 完成 输入 功能 ， 当 取 
值 off 时 表单 无 自动 完成 功能 。 

(2) placeholder 属性 

placeholder 属性 用 于 为 input 类 型 的 输入 框 提 供 关于 输入 内 容 的 提示 信息 。 当 输入 框 为 空 
时 显示 提示 信息 ， 而 当 输入 框 获得 焦点 时 提示 信息 会 消失 。 

例如 : 在 输入 账号 的 输入 框 中 显示 提示 信息 ， 输 入 内 容 前 的 显示 效果 如 图 9-8 所 示 ， 当 输 
入 框 获得 焦点 时 的 显示 效果 如 图 9-9 所 示 ， 代 码 如 下 。 

账号 ，<input type="text" name="userName" size="20" placeholder=" 请 输入 账号 "/> 


账号 : [请 给 入 账号 账号 : 
9-8 ”placeholder 属性 应 用 1 图 9-9 placeholder 属性 应 用 2 
(3) required 属性 


required 属性 用 于 规定 输入 框 的 内 容 不 能 为 空 ， 必 须 填写 ， 和 否则 会 给 出 必 填 的 提示 信息 ， 
且 不 允许 用 户 提交 表单 。 

(4) pattern 属性 

pattem 属性 用 于 验证 input 类 型 的 输入 框 中 ， 用 户 所 输入 内 容 的 格式 是 否 正确 ， 验 证 是 通 
过 与 pattem 属性 的 正则 表达 式 相 比较 实现 的 。 当 输入 内 容 的 格式 与 正则 表达 式 定义 的 格式 不 一 
致 时 ， 会 给 出 提示 信息 ， 且 不 允许 用 户 提交 表单 。 pattem 属性 可 用 于 身份 证 、 电 话 号 码 、 电 子 
邮箱 和 网 址 等 的 输入 格式 验证 。 

例如 : 输入 用 以 验证 18 位 身份 证 号 的 正则 表达 式 。 

身份 证 号 ;<input type="text" size="20" pattern="(^\d{18}S)INMd{17}QdIXIx)9)"> 

(5) autofocus 属性 

autofocus 属性 用 于 指定 页 面 加 载 后 是 否 自动 获取 焦点 ， 以 便 输入 关键 词 。 


9.2.3 ”其 他 表单 元 素 


除了 input 元 素 外 ，HTMLS5 表单 元 素 还 包括 textarea、select、datalist、keygen 和 output 等 ， 
本 节 将 对 它们 中 的 一 些 进行 详解 。 
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1. textarea 元 素 


textarea 元 素 用 于 定义 高 度 超过 一 行 的 多 行文 本 域 ， 多 行文 本 域 主要 用 于 输入 用 户 的 意见 、 
评论 和 一 些 反馈 信息 ， 用 户 可 以 在 里 面 书写 文字 ， 字 数 没有 限制 。 多 行文 本 域 的 格式 为 : 

<textarea name=" 文 本 域名 " rows=" 行 数 " cols=" 列 数 "> 

初始 文本 内 容 

</textarea> 

其 中 ，rows 用 于 设置 多 行文 本 域 的 行 数 ，cols 用 于 设置 多 行文 本 域 每 行 中 的 字符 数 ， 两 者 
的 取 值 都 是 正 整数 。 

例如 : 定义 留言 的 多 行文 本 域 ， 页 面 显示 效果 如 图 9-10 所 示 ， 代 码 如 下 。 

留言 : <br> 

<textarea name="liuyan" Tows="3" cols="50"> 请 留 下 你 宝贵 的 意见 。 </textarea> 


留言 : 


请 留 下 你 宝贵 的 意见 。 


9-10 多 行文 本 域 


2. select 元素 


select 元 素 用 于 创建 单 选 或 多 选 列表 ， 当 提交 表单 时 ,浏览 器 会 提交 选 定 的 项 。 网 页 上 经 常 
看 到 的 城市 、 出 生年 月 等 下 拉 列 表 框 就 是 用 select 元 素 定 义 的 。 下 拉 列 表 框 需要 使 用 <select> 标 
签 和 <option> 标 签 来 定义 ， 格 式 如 下 。 

<selectname=" 下 拉 框 名 " size=" 行 数 " multiple="multiple" > 

<option value=" 提 交 值 1" selected-"selected"> 显 示 文本 1</option> 
<option value=" 提 交 值 2" > 显示 文本 2</option> 


‘</select> 
(1) <selecf> 标 签 用 于 定义 下 拉 列 表 ，<selecf> 标 签 的 各 个 属性 的 含义 如 下 。 
e@ size: 下 拉 列 表 框 的 大 小 ， 即 显示 的 高 度 。 
e mnultiple: 当 定义 multiple="multiple" 时 ， 表 示 列 表 是 多 选 列表 ， 即 可 以 选择 多 项 。 
(2) <option> 标 签 嵌 套 在 < select></selec 人 标签 中 ,用 于 定义 下 拉 列 表 中 的 具体 选项 .<option> 
标签 的 各 个 属性 的 含义 如 下 。 
@ ”selected: 用 于 定义 该 项 的 初始 状态 是 默认 选中 状态 。 
e value: 用 于 定义 当 该 项 被 选中 并 提交 时 ， 提 交 到 服务 器 的 值 。 
【 例 9-2-1) 创建 “证 件 类 型 ”下 拉 列 表 ， 本 例 在 浏览 器 中 的 显示 效果 如 图 9-11 所 示 ， 页 面 
文件 9-2-1.html 的 关键 代码 如 下 。 
证 件 类 型 : <select name="IDs"> 
<option value="1" selected="selected"> 身 份 证 </option> 
<option value="2"> 驾 驶 证 </option> 
<option value="3"> 护 照 </option> 
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<option value="4"> 军 官 证 </option> 
</select><br> 
证 件 类 型 ， 
护照 
军官 证 


9-11 下 拉 列 表 框 


3. datalist 元 素 


datalist 是 HIML5 中 新 的 标签 ， 用 于 定义 input 输入 框 的 输入 选项 列表 ， 能 自动 匹配 表单 
的 可 能 的 输入 值 。input 输入 框 中 的 值 可 以 从 列表 中 选择 ， 也 可 以 自行 输入 ， 输 入 选项 列表 可 以 
使 用 datalist 的 option 元 素 创建 。 在 使 用 <datalist> 时 , 为 id 属性 指定 唯一 的 标识 ， 然 后 在 input 
元 素 内 指定 list 属性 的 属性 值 为 < datalist> 标 等 中 id 属性 的 值 ， 绑 定 datalist 即 可 。 
【 例 9-2-2】 创建 “常用 浏览 器 ”输入 框 ， 输 入 内 容 可 以 从 列表 中 选择 。 本 例 页 面 9-2-2.html 
的 初始 显示 效果 如 图 9-12 所 示 ; 输入 “c” 后 ， 显 示 出 与 关键 词 匹配 的 选项 ， 效 果 如 图 9-13 所 
示 。 关 键 代 码 如 下 。 
常用 浏览 器 : <input name="MyBrower" list="browers"/> 
<datalist id="browers"> 
<option value="Internet Explorer"> 
<option value="Firefox"> 
<option value="Chrome"> 
<option value="Opera"> 
<option value="Safari"> 
</datalist> 
常用 浏览 四 : 党 用 浏览 器 :6 "| 


Chrome 


图 9-12 页 面 初始 显示 效果 图 9-13 ”显示 与 关键 词 匹配 的 选项 


9.2.4 ”案例 制作 
【案例 : 用户 注册 】9.2.html 的 页 面 文档 代码 如 下 。 
<body> 


<form> 
<h3> 用 户 注册 </h3> 
账号 ，<input type="text" name="userName" size="20" placeholder=" 请 输入 账号 "/><br/> 
密码 : <input type="password" name="userPwd" size="20"/><br/> 
性 别 : <input type="radio" group="sex" checked="checked"> 男 
<input type="radio" group="sex"> 女 <br> 
年 龄 : <input type="number" max="60" min="10" value="22"><br/> 
爱好 : <input type="checkbox" name="likel" value="1" checked="checked"> 读 书 
<input type="checkbox" name="like2" value="2" checked="checked"> 旅 游 
<input type="checkbox" name="like3" value="3" > 上 网 
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<inputtype="checkbox" name="like4" value="4" > 运动 <br> 
生日 : <input type="date" value=-"2000-01-02" 广 <br> 
身份 证 号 : <input type="text" size="20" pattem= (dfl8}S)IAd{f17}CdXoS)"><br> 
上 传 照片 : <input type="file" name="picture"><input type="button" value=" 上 传 "><br/> 
请 您 留言 : <br> 
<textarea name="liuyan" rows="3" cols="50"> 请 留 下 你 宝贵 的 意见 。 </textarea> 
<br><br> 
&nbsp:&nbsp:<input value=" 提 交 " type="submit"/>&nbsp;&nbsp; 
<input value=" 重 填 " type="reset"/> 
</form> 
<body> 
【案例 说 明 】 对 于 包含 在 表单 中 的 文件 域 , 需要 设计 上 传 按钮 ,把 所 选择 的 文件 上 传 到 服务 
器 。 表单 的 提交 按钮 用 于 将 表单 中 各 个 控件 中 的 数据 和 上 传 文件 的 信息 (文件 路 径 、 文 件 名 、 类 


型 、 大 小 等 ) 提 交 到 服务 器 。 


用 CSS 控制 表单 样式 


在 设计 表单 时 ， 为 了 页 面 美观 ， 可 以 用 CSS 样式 对 表单 进行 美化 。 
【 例 9-3-1】 设计 管 理 员 登 录 页 面 ， 用 CSS 进行 样式 控制 。 本 例文 件 9-3-1.html 的 显示 效果 
如 图 9-14 所 示 。 


WD wna x 民 汪 
CG | @ filey//G:/ 数 学 资料 / 数 材 /HTML5Weby/loginhtml 全 | : 


图 9-14 利用 CSS 美化 后 的 管理 员 登 录 页 面 


在 HBuilder 中 制作 该 页 面 的 过 程 如 下 。 

(D 创建 项 目 ， 把 需要 的 图 片 文件 复制 到 img 文件 夹 中 。 如 果 已 建 项 目 ， 则 把 图 片 素材 复 
制 到 已 建 项 目的 img 文件 夹 中 即 可 。 

(2) 创建 网 页 结构 文件 ， 在 当前 项 目 中 创建 一 个 HIML5 网 页 文件 ， 文 件 名 为 9-3-1.html， 
代码 如 下 。 

<head> 

<meta charset="utf-8"> 
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<title> 管 理 员 登 录 </title> 
<link href="css/9-3-1.css" rel="stylesheet" type="text/css"/> 
</head> 
<body> 
<div> 
<fomm action="#" method="post"> 
<p class="pl"></p> 
<p class="p2"> 
<span> 账 号 : </span> 
<input type="text" name="num" class="account" placeholder="admin"/> 
<p> 
<p class="p3"> 
<span> 密 码 : </span> 
<input type="password" name= "pwd" class="password" > 
<p> 
<p class="p4"> 
<input type="button" class="btn0l" value=" 登 、 录 "/> 
<input type="button" class="btn02" value=" 注 ” 册 "/> 


(3) 创建 外 部 样式 文件 ,在 当前 项 目的 css 文件 夹 中 新 建 一 个 CSS 文件 ,文件 名 为 9-3-1.css， 


对 登录 表单 及 表单 控件 进行 样式 控制 。CSS 样式 文件 的 代码 如 下 。 


body{ font-size:14px: font-family:" 宋 体 ": } 让 全 局 控制 文本 样式 */ 
body,forminput.p{ padding:0: margin:0; border0:} 让 重 置 浏览 器 的 默认 样式 */ 
div{ 启用 div 布局 ， 定 义 页 面 的 背景 * 
Width:10096: 
height:auto: 
background-image:linear-gradient(180deg.#9cf#FFF): /* 线 性 渐变 背景 +/ 
margin:0: 
padding-top:80px: 
padding-bottom:80px: 
> 
form{ 人 # 定 义 表单 的 样式 ， 使 表单 显示 为 一 个 矩形 框 。 所 
width:400px: 
height:200px: 
padding-top:Opx: 
margin:5Opx auto: /# 使 表单 在 浏览 器 中 居中 所 
background:#f5f8fd: 片 为 表单 添加 背景 颜色 */ 
border-radius: 1px: 片 设置 圆 角 边框 */ 
border: 1px solid #4faccb: 
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box-shadow: 2px 2px 1px #6B5D50: 证 设置 边框 投影 */ 


》 

证 将 表单 中 的 一 行 元 素 作 为 段落 样式 进行 控制 ， 先 进行 段落 样式 定义 */ 

Pp{ text-align:center } 

Pl{ 证 定义 管理 员 登 录 表单 中 的 蓝 色 和 矩 形 块 */ 

height:40px: 
background: #4FACFB: 
margin:0; 

} 

p21{ margin-top:25px: } 上 定义 账号 一 行 的 上 外 边 距 */ 

.3,.p4{margin-top:15px:} ”/* 定 义 密码 和 按钮 一 行 的 上 外 边 距 */ 

Pspan { 

Width:50px; 
display:inline-block 
text-align:right; 
} 
‘account,.password{ # 对 文本 框 设置 共同 的 宽度 、 高 度 、 边 框 、 内 边 距 #/ 
width:152pX: 
height:20px: 
border1px solid#777: 
Ppadding:2px 2px 2px 20pX: 
font-size: 13px: 

} 

.account{ 让 定义 账号 文本 框 的 背景 和 文本 颜色 */ 
backeround:url(../img/1.jpg) no-repeat 3px center #FFF: 
Color:#999; 

} 

password{ 上 定义 密码 文本 框 的 背景 */ 
backeround:url(../img/2.jpg) no-repeat 3px center #FFF: 

} 

.btn01.btn02{ 上 定义 按钮 的 样式 */ 

Width:60px: 
height:25px: 
font-size:12px: 
border-radius:3px: 片 设置 圆 角 边框 */ 
border: 1px solid #6b5d50: 
margin:Spx 0 0 30px: 
background:#DDD: 店 设 置 按钮 的 背景 颜色 */ 
光 
(4) 预览 网 页 。 浏 览 效果 如 图 9-14 所 示 。 
说 明 : 本 例 也 可 以 用 表格 +CSS 布局 设计 进行 实现 。 
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3 
| 实 训 
【 实 训 任务 】 练 习 创 建 会 员 注 册页 面 ， 用 CSS 控制 注册 表 的 样式 。 本 例文 件 9-4.html 在 正 
浏览 器 中 的 显示 效果 如 图 9-15 所 示 。 
FIIEETISIEE 
FE Kn 
CGC © file//E/AladLed/chapter09/9-4.html |: 
( 必 坊 ) 
( 必 填 不 能 少 于 8 位 ) 
【 必 填 二 能 少 于 8 位 ) 
【 必 填 ,只 能 输入 汉字 ) 
( 几 填 }) 
上 ”Li 碳 . tm 
年 /月 /日 ( 必 填 ) 
电子 邮箱 ; ”name@153.com ( 交 填 ) 
身份 证 号 【 几 填 ，18 位 身份 证 号 ) 
手机 号 码 ; ( 必 填 ) 
个 人 主页 :http /www sdwrp com 【请 选择 网 址 ) 
提交 


图 9-15 会 员 注册 页 面 


【知识 要 点 】HIMLS 表单 及 其 属性 、 表 单元 素 及 其 属性 、 用 CSS 控制 表单 样式 。 
【 实 训 目 标 】 掌 握 创 建 表 单 、 表 单 控件 及 其 属性 的 用 法 ， 并 且 能 用 CSS 样式 美化 表单 。 


9.4.1 任务 分 析 


1. 页 面 结构 分 析 


根据 页 面 效果 图 和 经 验 分 析 得 知 ， 页 面 的 整体 内 容 可 以 放 在 一 个 div 中 ， 在 这 个 div 中 再 


放置 表单 。 表 单 上 面 有 标题 ， 以 及 排列 整齐 且 有 规律 的 表单 控件 ， 左 侧 为 提示 信息 ， 右 侧 为 表 


单 控件 和 说 明 信 息 。 可 以 设计 每 行为 一 个 段落 , 每 行 由 <span> 提 示 信 息 </span> 和 <inpuf> 控 件 组 


成 ， 如 图 9-16 所 示 。 


2. CSS 样式 分 析 


(1) 整个 页 面 的 布局 通过 div 实现 ， 包 括 页 面 大 小 和 背景 设置 。 


(2) 表单 的 位 置 、 宽 度 、 高 度 、 内 边 距 、 外 边 距 等 ， 通 过 对 form 进行 样式 设计 实现 。 


238 


时 ”一 训 
<p> [<Spany 提 示 信息 <input> 控 件 | 补充 信息 
<p> <span> 提 示 信息 <input> 控 件 补充 信息 
<p> [<span> 提 示 信息 <input> 控 件 | 补充 信息 

侣 <p> | <span> 提 示 信息 <input> 控 件 ] 补充 信息 
<p> [ <span> 所 示 信 息 <input> 控 件 补充 信息 
<p> | <span> 提 示 信息 <input> 控 件 补充 信息 
<p> | <span> 提 示 信息 | <input> 控 件 补充 信息 
<p> [xspan> 提 示 信息 | <input> 控 件 补充 信息 
<p> [<span> 提 示 信息 <input> 控 件 ] 补充 信息 
<p> | <span> 提 示 信 息 <input> 控 件 补充 信息 
<p> | <input> 控 件 <input> 控 件 | 


图 9-16 页 面 结构 图 
(3) 标题 用 <h2> 实 现 ， 对 其 设置 对 齐 、 外 边 距 等 ， 控 制 显示 位 置 。 
(4) 表单 的 每 行 信息 用 段落 <p> 实 现 ， 所 有 行 的 公共 样式 通过 对 <p> 标 签 定义 样式 实现 。 
(5) 左 侧 提示 信息 的 样式 通过 对 <span> 标 签 定义 样式 实现 。 
(6) 所 有 <input> 样 式 相同 ， 可 以 对 <input> 标 签 定义 样式 ， 包 括 宽度 、 高 度 、 边 距 等 。 
(7) 表单 底部 的 按钮 样式 用 CSS 进行 定义 。 


9.4.2 ”任务 实现 
根据 上 面 的 分 析 ， 建 立 网 页 文件 和 外 部 样式 文件 ， 完 成 会 员 注册 页 面 的 设计 。 
1. 创建 页 面 文件 


(1) 启动 HBuilder， 在 当前 项 目 中 新 建 一 个 HIML5 文档 ， 文 件 名 为 9-4.html。 
(2) 在 HBuilder 编辑 区 编辑 文件 ， 页 面 文件 结构 代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title> 会 员 注册 </title> 
<link rel="stylesheet" href="css/9-4.css" /> 
</head> 
<body> 
<divid="be"> 
-<form action="#" method="get" autocomplete="off'> 
<h2> 会 员 注册 </h2> 
<p><span> 登 录 名 : </span><input type="text" name="user name" placeholder=" 手 机 号 " 
Tequired/>( 必 填 )<p> 
<p><span> 密 &nbsp:&nbsp: 码 : </span><input type="password" name= user pwd" value="" 
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Tequired 广 ( 必 填 .不 能 少 于 8 位 )</p> 
<p><span> 确 认 密码 : </span><input type= "password" name="pwdl" value="" required />( 必 填 . 
不 能 少 于 8 位 )<p> 
<p><span> 真 实 姓名 : </span><input type="text"name="real_ name"pattem- [wu4e00-u9fas] {0.}$" 
required/>( 必 填 ， 只 能 输入 汉字 )</p> 
<p><span> 真 实 年 龄 : </span><input type="number" name="real age" value="24" min="15" 
Iax="120" required/>( 必 填 )<p> 
<p><span> 出 生日 期 :</span><input type="date" name="birthday" value="1990-10-1" required/> 
( 必 填 )<%p> 
<p><span> 电 子 邮箱 : </span><input type="email" name="myemail" placeholder="name 
@163.com" required multiple 户 ( 必 填 )</p> 
<p><span> 身 份 证 号 : </span><input type="text" name="card" required pattem="^\d{8,18}| 
[0-9x]{8,18}[0-9X]{8.18}?$"/>( 必 填 ，18 位 身份 证 号 )</p> 
<p><span> 手 机 号 码 : </span><input type="tel" name="telphone" patterm="^\d{11}$" required/> 
( 必 填 )<%p> 
<p><span> 个 人 主页 : </span><input type= "url" name="myurl" list="urllist" placeholder= 
"http://www.sdwrp.com" pattem= "http:WTVw-]HJ+[\w-]HUT\w-./29%o&=]*)?$"/>( 请 选择 网 址 ) 
<datalist id="urllist"> 
<option>http://www.sdwrp.com</option> 
<option>https://www.baidu.com</option> 
<option>http://www.w3school.com.cn</option> 
</datalist> 
<p> 
<p class="btn"> 
<input type="submit" value=" 提 交 "/> 
<input type="reset" value=" 重 置 "/> 


<p> 
</form> 
</div> 
<Jbody> 


2. 创建 CSS 样式 文件 


创建 外 部 样式 文件 ， 在 当前 项 目的 css 文件 夹 中 新 建 一 个 CSS 文件 ， 文 件 名 为 9-4.css， 样 
式 代 码 如 下 。 

(1) 定义 页 面 的 统一 样式 。 

body{ font-size:13px; font-family:" 微 软 雅 黑 ":} 让 页 面 的 所 有 文本 样式 */ 

body,form.input.h1.p{ padding:0: margin:0: border:0: } ”/* 重 置 浏览 器 的 默认 样式 */ 

(2) 页 面 整体 布局 

整个 页 面 用 div 布局 ，div 铺 满 整个 窗口 ， 并 且 用 CSS 为 div 设置 背景 。 为 了 对 表单 进行 定 
位 显示 ， 先 对 div 进行 相关 定位 。 背 景 图 像 使 用 渐变 效果 ， 使 文字 看 起 来 清晰 ， 没 有 文字 的 空 
间 图 像 也 不 模糊 。 


240 


#bg{ 
width:100%; 
height750px: 
background:linear-gradient(to right. reba(255.255.255.0). reba(255.255.255.0) 309%0.Tgba(255.2SS.255.1)) , 
wl(./img/register bgjpg): /* 渐 变 背 景 */ 
background-size: cover:。/* 背 景 铺 满 */ 
position:relative:; 店 相 对 定位 */ 
} 
(3) 表单 样式 
用 CSS 对 表单 进行 样式 设计 ， 包 括 宽度 、 高 度 、 内 边 距 、 显 示 位 置 等 。 
form{ 
width:450px: 
height:600px: 
position:absolute; 刻 设 置 绝 对 定位 */ 
right:8%: 
top:4%; 
时 
(4) 标题 样式 
设置 标题 居中 显示 ， 为 了 美观 ， 定 义 标题 的 上 下 外 边 距 与 表单 控件 保持 适当 距离 。 
h2{ 
width:400px: A 控制 标题 位 置 */ 
text-align:center: 
margin:25px 0: 
font-weight:600; 
} 
(5) 所 有 行 的 共同 样式 
每 行 信息 为 一 个 段落 ， 包 括 提示 信息 和 表单 控制 ， 行 间距 离 通 过 设置 外 边 距 实现 。 
Pp{margin-top:20px:} 
(6) 左 侧 提示 信息 样式 
左 侧 提示 信息 统一 靠 右 对 齐 ， 通 过 设置 显示 宽度 、 转 换 显 示 类 型 为 行内 元 素 和 设置 右 侧 文 
本 对 齐 方式 来 实现 。 设 置 右 内 边 距 可 以 实现 提示 信息 与 表单 控件 的 间距 。 


Pspan{ 
width:75px: 
display:inline-block: 片 将 行内 元 素 转换 为 内 联 元 素 */ 
text-align:right: 片 右 侧 显 示 */ 
padding-right: 10px: 店 右 内 边 距 */ 
} 
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(7) 表单 控件 样式 
为 了 美观 ， 统 一 定义 所 有 输入 框 的 宽度 、 高 度 、 边 框 样式 和 内 边 距 。 
pinput{ 
width:200px: 
height: 18px: 
border: 1px solid #d4cdba: 
Ppadding:2px: 片 设置 输入 框 与 输入 内 容 之 间 相 隔 2px 的 距离 */ 
} 
(8) 按钮 样式 
设置 按钮 的 大 小 (宽度 和 高 度 )、 背 景 颜 色 、 边 框 样式 和 位 置 (通过 外 边 距 实 现 )。 
-btn input{ 
width:70px; 
height:25px: 
border 1px solid #AAA; 
background:#DDD: 让 设置 按钮 的 背景 颜色 */ 
margin-top:15px: 
margin-left:80px: 
border-radius:3px; 让 设置 圆 角 边框 */ 
font-size:13pX: 
font-family:" 微 软 雅 黑 "; 
color#111: 人 # 设 置 按钮 上 文本 的 颜色 所 
} 


3. 浏览 网 页 


在 Chrome 浏览 器 中 浏览 网 页 ， 效 果 如 图 9-15 所 示 。 
【 实 训 说 明 】 表 单 布局 也 可 以 用 表格 +CSS 布局 实现 。 


本 章 小 结 


本 章 讲述 了 网 页 的 表单 元 素 及 其 属性 、 表 单 控件 及 其 属性 、 用 CSS 样式 对 表单 进行 美化 等 
内 容 。 重 点 讲解 了 表单 控件 中 的 input 控件 及 其 常用 属性 text、password、radio、checkbox、number、 
date pickers、submit、reset 和 color 等 ， 还 介绍 了 textarea、select、datalist 等 表单 元 素 ， 并 结合 
实例 介绍 了 使 用 CSS 对 表单 进行 布局 和 样式 修饰 的 方法 。 


[1 练习 题 


1. 设计 如 图 9-17 所 示 的 用 户 登 录 页 面 。 
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图 9-17 用 户 登录 页 面 
2. 用 表格 +CSS 布局 实现 图 9-15 所 示 的 页 面 。 
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第 10 章 
CSS3 简 单 动 画 


在 传统 的 Web 设计 中 , 当 网 页 中 需要 显示 动画 或 特效 时 ， 需 要 使 用 JavaScript 脚本 或 Flash 
来 实现 。 在 CSS3 中 ， 提 供 了 对 动画 的 强大 支持 ， 可 以 实现 旋转 、 缩 放 、 移 动 和 过 渡 等 效果 。 
本 章 将 对 CSS3 中 的 过 渡 、 变 形 和 动画 进行 详解 。 


本 章 的 学 习 目 标 : 

e 理解 过 渡 属 性 ， 能 够 控制 过 渡 时 间 、 动 画 快慢 等 常见 过 渡 效 果 。 
。 掌握 CSS3 中 的 变形 属性 ， 能 够 实现 2D 转换 、3D 转换 效果 。 

。 掌握 CSS3 中 的 动画 技术 ， 能 够 制作 网 页 中 常见 的 动画 效果 。 


CSS3 过 渡 


CSS3 过 渡 是 元 素 从 一 种 样式 逐渐 改变 为 另 一 种 样式 时 的 效果 ， 如 渐 显 、 渐 弱 、 动 画 快慢 
等 。CSS3 提供 了 强大 的 过 渡 属 性 ， 可 以 在 不 使 用 Flash 动画 或 JavaScript 脚本 的 情况 下 ， 为 元 
素 从 一 种 样式 转变 为 男 一 种 样式 时 添加 效果 。 过 渡 效 果 通 常 在 用 户 将 指针 移动 到 元 素 上 时 发 生 ， 
当 指 定 的 CSS 属性 改变 时 ， 应 用 过 渡 效 果 。CSS3 中 的 过 渡 属 性 如 表 10-1 所 示 。 下 面 将 分 别 对 
这 些 过 渡 属 性 进行 详解 。 


表 10-1 CSS3 中 的 过 渡 属 性 


属 性 功 能 
transition- 指定 应 用 过 渡 效 果 的 CSS 属性 名 称 ， 默 认 值 为 al 
transition-duration 定义 过 渡 效果 花费 的 时 间 ， 默 认 值 为 0 
transition-timing-finction 规定 过 渡 效果 的 速度 曲线 ， 默 认 是 ease 
transition-delay 规定 过 渡 效果 何 时 开始 ， 默 认 是 0 
transition 简写 属性 ， 用 于 在 一 个 属性 中 设置 4 个 过 渡 属性 


10.1.1 transition-property 属性 
transition-property 属性 用 于 指定 应 用 过 渡 效 果 的 CSS 属性 名 称 ， 默 认 值 为 all。 基 本 语法 格 
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式 如 下 。 

transition-property : none | all | property: 

e none: 没有 属性 会 获得 过 渡 效 果 。 

e all: 所 有 属性 都 将 获得 过 渡 效 果 。 

@ property: 定义 应 用 过 渡 效 果 的 CSS 属性 名 称 ， 多 个 名 称 之 间 以 逗号 分 隔 。 

【 例 10-1-1】 用 transition-property 属性 指定 应 用 过 渡 效 果 的 CSS 属性 名 称 。 本 例 在 浏览 
中 所 显示 效果 的 初始 状态 如 图 10-1 所 示 ， 图 片 样式 为 小 图 、 半 透明 ， 当 鼠标 悬 停 在 图 片上 时 ， 
图 片 变 成 大 图 、 完 全 透明 ， 最 终 效 果 如 图 10-2 所 示 。 页 面 文件 10-1-1.html 的 关键 代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title>transition-property 属性 </title> 
<style type="text/css"> 
div{ 
width:267px; 
height:234px; 
text-align:center; 
border 1px solid #333; 
} 
img {width:72px; 
height:64px: 
border: lpx solid #888888; 
opacity:0.5; 人 # 透 明度 为 0.5*/ 
margin-top:4px; 
} 
img:hover{ 
width:257px; 
height:224px; 
‘opacity:1: 
transition-property:width.height: /# 指 定 应 用 过 渡 效 果 的 CSS 属性 名 称 */ 
-webkit-transition-property:width .height /*Safari 和 Chrome 浏览 器 兼容 代码 */ 
-moz-transition-property:width.height: /*Firefox 浏览 器 兼容 代码 */ 
-0-transition-property:width.height: /*Opera 浏览 器 兼容 代码 */ 
} 
</style> 
</head> 
<body> 
<div><img ste="img/picl jpe"> </div> 
body> 
【说 明 】 本 例 在 浏览 器 中 预览 时 ， 当 鼠标 指向 图 片 的 瞬间 ， 图 片 的 宽度 、 高 度 和 透明 度 都 立 
刻 完成 了 变化 ， 没 有 出 现 渐 显 、 渐 弱 等 “过 渡 ” 效 果 。 这 是 因为 在 设置 “过 渡 ” 效 果 时 ， 必 须 
使 用 transition-duration 属性 来 设置 过 渡 时 间 ， 和 否则 不 会 产生 过 渡 效果 。 
另外 ， 为 了 解决 各 类 浏览 器 的 兼容 性 问题 ， 分 别 添 加 了 -webkit(Safar 和 Chrome)、 
-moz-(Firefox) 和 -0-(Opera) 等 不 同 的 浏览 器 前 级 兼容 代码 。 
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DD transition-timin x OS 


C | © file///F/HTMLS... : 


/DD wansition-timin x 


CG ©file///F/HTMLS.. 女 | :; 


\ 泡 


图 10-1 页 面 的 初始 状态 10-2 页 面 的 最 终 状态 


10.1.2 transition-duration 属性 
transition-duration 属性 用 于 定义 过 渡 效 果 花 费 的 时 间 , 默认 值 为 0, 常用 单位 是 秒 (s) 或 毫秒 
(ms)， 基 本 语法 格式 如 下 。 
ER 
【 例 10-1-2】 在 例 10-1-1 的 基础 上 ， 用 transition-duration 属性 指定 过 渡 时 间 。 当 鼠标 悬 停 


在 图 10-1 所 示 的 小 图 上 时 ， 图 片 样式 发 生 改变 ， 样 式 改变 过 渡 时 间 为 2 秒 ， 最 终 效果 如 图 10-2 
所 示 。 添 加 的 代码 如 下 所 示 。 


transition-duration: 2s; 让 定义 过 渡 效 果 花 费 的 时 间 */ 
-webkit-transition-duration:2s; /*Safari 和 Chrome 浏览 器 兼容 代码 对 
-moz-transition-duration:2s: /*Firefox 浏览 器 兼容 代码 #/ 
-o-transition-duration:2s: /#*Opera 浏览 器 兼容 代码 */ 


【说 明 】 本 例 中 ， 在 浏览 器 中 预览 页 面 ， 当 鼠标 指向 图 片 时 ， 图 片 样式 变化 内 容 有 width、 
height 和 opacity 三 项 ， 使 用 transition-property 属性 指定 应 用 过 渡 效 果 的 属性 为 width 和 height 
后 ， 只 有 图 片 的 宽度 和 高 度 两 个 样式 应 用 了 过 渡 效 果 ( 样 式 变化 持续 了 2 秒 )， 而 透明 度 不 应 用 
过 渡 效 果 。 当 鼠标 指向 图 片 的 瞬间 ， 透 明度 都 立刻 完成 了 变化 。 


10.1.3 _ transition-timing-function 属性 


transition-timing-fimction 属性 规定 过 渡 效 果 的 速度 曲线 ,默认 值 为 ease, 基本 语法 格式 如 下 。 
ee 

各 参数 的 含义 如 下 。 

linear: 指定 以 相同 速度 开始 至 结束 的 过 渡 效 果 。 

ease: 指定 以 慢 速 开始 ， 然 后 加 快 ， 最 后 慢 慢 结 束 的 过 渡 效 果 。 

ease-in: 指定 以 慢 速 开始 ， 然 后 逐渐 加 快 ( 淡 入 效果 ) 的 过 渡 效 果 。 

ease-out: 指定 以 慢 速 结束 (淡出 效果 ) 的 过 渡 效果 。 

ease-in-out: 指定 以 慢 速 开 始 至 结束 的 过 渡 效 果 。 
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【 例 10-1-3】 在 例 10-1-2 的 基础 上 ， 用 transition-timing-function 属性 规定 过 渡 效果 的 速度 
曲线 。 添 加 的 代码 如 下 所 示 。 页 面 浏览 效果 如 图 10-1 和 图 10-2 所 示 。 

transition-timing-finction:ease-out: 证 过 渡 效 果 的 速度 曲线 */ 

-webkit-transition-timing-finction:ease-out: 

-moz-transition-timing-function:ease-out: 

-0-transition-timing-function:ease-out: 

【说 明 】 使 用 transition-timing-function 属性 规定 过 渡 效 果 以 慢 速 结束 ,在 持续 2 秒 的 变化 过 
程 中 ， 图 片 的 宽度 和 高 度 变化 以 慢 速 结束 。 


10.1.4 transition-delay 属性 


transition-delay 属性 规定 过 渡 效 果 何 时 开始 ， 默 认 值 为 0， 常 用 单位 是 秒 (s) 或 毫秒 (ms)。 
transition-delay 的 属性 值 可 以 为 正 整数 、 负 整数 和 0。 当 设置 为 负数 时 ， 过 渡 动 作 会 从 该 时 间 点 
开始 ， 之 前 的 动作 被 截断 ， 当 设置 为 正 数 时 ， 过 渡 动 作 会 延迟 触发 。 基 本 语法 格式 如 下 。 
transition-delay : time: 
【 例 10-1-4】 在 例 10-1-3 的 基础 上 , 用 transition-delay 属性 指定 过 渡 效 果 从 1 秒 后 开始 。 添 
加 的 代码 如 下 所 示 。 页 面 浏 览 效 果 如 图 10-1 和 图 10-2 所 示 。 
transition-delay:1s: /# 指 定 动画 延迟 1 秒 触 发 */ 
-webkit-transition-delay:1s; 。 /*Safari 和 Chrome 浏览 器 兼容 代码 */ 
-moz-transition-delay:1s; 。 。”/*Firefox 浏览 器 兼容 代码 */ 
-o-transition-delay:1s: /*Opera 浏览 器 兼容 代码 */ 
【说 明 】 在 浏览 器 中 预览 页 面 ， 当 鼠标 指针 悬 停 到 小 图 上 时 ， 图 片 透明 度 立刻 变化 ， 等 待 
1s 后 过 渡 效 果 出 现 ， 样 式 开始 改变 ， 图 片 的 宽度 和 高 度 也 发 生 改变 ， 变 化 过 程 持 续 2 秒 ， 慢 速 
完成 。 
10.1.5 ”transition 属性 
transition 属性 是 复合 属性 ， 用 于 在 一 个 属性 中 设置 transition-property、transition- duration、 
transition-timing-function 和 transition-delay 4 个 过 渡 属性 。 基 本 语法 格式 如 下 。 
transition:property duration timing-function delay: 
在 使 用 transition 属性 设置 多 个 过 渡 效 果 时 ， 它 的 各 个 参数 必须 按照 顺序 进行 定义 ， 不 能 颠 
倒 。 例 10-1-4 中 设置 的 4 个 过 渡 属性 ， 可 以 直接 通过 如 下 代码 实现 。 
transition:width .height 2s ease-out 1s: 
注意 : 
无 论 是 单个 属性 还 是 简写 属性 ， 使 用 时 都 可 以 实现 多 个 过 渡 效 果 。 如 果 使 用 transition 简写 
属性 设置 多 种 过 渡 效 果 ， 需 要 在 每 个 过 渡 属 性 集合 中 指定 所 有 的 值 ， 并 且 使 用 过 号 进行 分 隔 。 
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1 变形 


在 CSS3 之 前 ， 如 果 需 要 为 页 面 设置 变形 效果 ， 需 要 依赖 于 图 片 、Flash 或 JavaScript 才能 
完成 。CSS3 出 现 后 ， 通 过 transform 属性 就 可 以 实现 变形 效果 ， 如 移动 、 倾 余 、 缩 放 以 及 翻转 
元 素 , 不 需 加 载 额外 的 文件 , 这 极 大 地 提高 了 网 页 开发 者 的 工作 效率 , 提高 了 页 面 的 执行 速度 。 
本 节 将 对 CSS3 中 的 transform 属性 、2D 及 3D 转换 进行 详解 。 


10.2.1 案例 展示 


【案例 展示 】 设 计 客户 案例 局 部 页 面 ， 实 现 当 鼠 标 悬 浮 于 图 片上 时 , 文字 说 明 信 息 从 图 片上 
方 滑 下 后 覆盖 图 片 ， 文 字 半 透明 ， 能 看 到 后 面 的 图 片 。 本 例文 件 10-2.html 在 浏览 器 中 的 显示 效 
果 如 图 10-3 和 图 10-4 所 示 。 


让 客户 案 漠 


© | © 127.00.1:8020/Alad 


C | © 127.00.1:8020/Alad 


图 10-3 客户 案例 局 部 页 面 图 10-4 和 鼠标 悬浮 于 图 片上 时 的 效果 


【知识 要 点 】CSS3 中 的 transform 属性 、2D 及 3D 转换 。 
【学 习 目 标 】 掌 握 transform 属性 、2D 及 3D 转换 技术 ， 实 现 移 动 、 倾 斜 、 缩 放 以 及 翻转 元 


10.2.2 ”认识 变形 


2012 年 9 月 ,W3C 组 织 发 布 了 CSS3 变形 工作 草案 , 这 个 草案 包括 了 CSS3 2D 变形 和 CSS3 
3D 变形 。 

CSS3 变形 是 一 系列 效果 的 集合 ， 如 平移 、 旋 转 、 缩 放 和 倾斜 等 ， 这 些 效果 的 实现 都 是 以 
transform 属性 为 基础 的 。CSS3 中 的 变形 允许 动态 地 控制 元 素 ， 可 以 在 网 页 中 对 元 素 进行 移动 、 
缩放 、 倾 斜 、 旋 转 ， 或 者 结合 这 些 变形 (transform) 属 性 产生 复杂 的 动画 。 通 过 CSS3 中 的 变形 操 
作 ， 可 以 让 元 素 生成 动态 的 视觉 效果 ， 也 可 以 结合 过 渡 和 动画 属性 产生 一 些 新 的 动画 效果 。 

CSS3 的 变形 属性 可 以 让 元 素 在 一 个 坐标 系统 中 变形 。 这 个 属性 包含 一 系列 变形 函数 ， 可 
以 进行 元 素 的 移动 、 旋 转 和 缩放 等 。transform 属性 的 基本 语法 如 下 。 

transform : none | transform-finctions: 

参数 如 下 。 

@ hone: 表示 不 进行 变形 。 
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®@ transform-functions: 用 于 设置 变形 函数 ， 可 以 是 一 个 或 多 个 变形 函数 列表 。 
transform-finctions 函数 包括 translate0、scale0、rotate0 和 skew0 等 ， 具 体 说 明 如 下 。 
e@ translate0: 移动 元 素 对 象 ， 即 基于 X 和 了 坐标 重新 定位 元 素 。 


e@ scale0: 缩放 元 素 对 象 ， 可 以 使 任意 元 素 对 象 的 尺寸 发 生变 化 ， 取 值 包括 正 数 、 负 数 和 


小 数 。 
e@ rotate0: 旋转 元 素 对 象 ， 取 值 为 一 个 度数 值 。 
e@ skew0: 倾斜 元 素 对 象 ， 取 值 为 一 个 度数 值 。 


transform 属性 有 一 个 奇怪 的 特性 ， 即 它们 对 于 周围 的 元 素 不 会 产生 影响 。 例 如 ， 如 果 将 一 


个 元 素 旋转 45”， 它 实际 上 重 辣 在 元 素 的 上 方 、 下 方 或 旁边 ， 而 不 会 移动 周围 的 内 容 。 
10.2.3 2D 转换 
在 CSS3 中 ， 使 用 transform 属性 可 以 实现 的 变形 主要 有 平移 、 缩 放 、 倾 余 和 旋转 这 4 种 。 
1. 平移 


使 用 translate0 方 法 可 实现 平移 效果 ， 使 元 素 从 当前 位 置 平移 ， 移 动 距离 根据 给 定 的 lef(X 


坐标 ): 和 top(Y 坐标 ) 位 置 参 数 进行 设置 。 该 函数 包含 两 个 参数 值 ， 分 别 用 于 定义 和 X 轴 和 立轴 和 
标 ， 基 本 语法 格式 如 下 。 

transform : translate(x-value.y-value): 

参数 : 

ex-value 指 元 素 在 水 平方 向 上 移动 的 距离 。 

e y-value 指 元 素 在 垂直 方向 上 移动 的 距离 。 

如 果 省 略 第 二 个 参数 ， 则 取 默 认 值 0。 当 值 为 负 值 时 ， 表 示 反 方向 移动 元 素 。 


【 例 10-2-1】 用 translate0 方 法 实现 元 素 移动 。 如 图 10-5 所 示 ， 当 鼠标 指向 金鱼 图 片 时 ， 金 
鱼 图 片 向 右 平移 130px， 向 下 平移 10px， 效 果 如 图 10-6 所 示 。 页 面 文件 10-2-1.html 的 代码 如 


下 所 示 。 
<head> 
<meta charset="utf-8"> 
<title>transform:translateO</title> 
<style type="text/css"> 
div{ 
width:100px: 
height:80px: 
border: 1px solid #333; 
} 
img{ 
width:90px: 
height:70px: 
margin: 1px: 
} 
img-hover{ 
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transform:translate(130px. 10px): 


-webkit-transform:translate(130px.10px); 


-moz-transform:translate(130px, 10px): 
-0-transform:translate(130px.10px); 
transition-duration:3s: 


/*Safar 和 Chrome 浏览 器 兼容 代码 */ 
/*Firefox 浏览 器 兼容 代码 */ 

/#*Opera 浏览 器 兼容 代码 所 

让 过 渡 效 果 持 续 3 秒 */ 


-webkit-transition-duration:3s; 
-moz-transition-duration:3s; 
-0-transition-duration:3s; 
} 
</style> 

</head> 

<body> 

<div><img src="img/pic2.jpe"> </div> 
</body> 


在 使 用 translate0 方 法 移动 元 素 时 , 基点 默认 为 元 素 的 中 心 点 , 然后 根据 指定 的 XX 坐标 和 了 


华 标 进行 平移 。 


[SIJIEI 画 | 3 
WD wanstorm:translate0 =x 


C |®12700.18020/x1/1.. 会 | : 


7 和 


LIEIGT[ 3] 


7 口 transform:translate) x \ 


C 0 127.00.18020/xy1， 六 | : 


7 区 


图 10-5 元 素 移动 前 的 效果 


2. 缩放 


图 10-6 元 素 移动 后 的 效果 


scale0 方 法 用 于 缩放 元 素 大 小 ， 包 含 两 个 参数 值 ， 分 别 用 来 定义 宽度 和 高 度 的 缩放 比例 。 
元 素 尺寸 的 增加 或 减少 ， 由 定义 的 宽度 (X 轴 ) 和 高 度 (Y 轴 ) 参 数控 制 ， 基 本 语法 格式 如 下 。 


transform: scale(x-axis.y-axis): 
参数 如 下 。 


e ”x-axis: 元 素 沿 义 轴 方 向 上 的 缩放 比例 。 
e@ y-axis: 元 素 沿 立轴 方向 上 的 缩放 比例 。 


参数 值 可 以 是 正 数 、 负 数 和 小 数 。 正 数值 表示 基于 指定 的 宽度 和 高 度 缩放 元 素 。 负 数值 不 
会 缩小 元 素 ， 而 是 反 转 元 素 (如 文字 被 反 转 )， 然 后 再 缩放 元 素 。 如 果 省 略 第 二 个 参数 ， 则 第 二 
个 参数 等 于 第 一 个 参数 。 另 外 ， 使 用 小 于 1 的 小 数 可 以 缩小 元 素 。 

【 例 10-2-2】 修 改 例 10-2-1 的 代码 ， 用 scale0 方 法 实现 元 素 的 缩放 。 当 鼠标 指向 图 10-5 中 
的 金鱼 图 片 时 ， 金 鱼 图 片 向 右 平移 ， 同 时 沿 义 轴 放 大 1.5 倍 ,效果 如 图 10-7 所 示 。 修 改 的 代码 


如 下 所 示 。 


img:hover{ 
‘transform:translate(130px.10px) scale(1.5.1): 


片 元 素平 移 并 沿 义 轴 放大 1.5 倍 */ 


-webkit-transform:translate(130px.10px) scale(1.5.1): /*Safari 和 Chrome 浏览 器 兼容 代码 */ 
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放大 1.5 倍 ， 垂 直方 向 不 变 ， 过 渡 时 间 为 3 秒 。 


-moz-transform-translate(130px,10px) scale(1.5.D): 。 /#EFirefox 浏览 器 兼容 代码 */ 
-o-transform:translate(130px.10px) scale(1.5.1): /*Opera 浏览 器 兼容 代码 */ 
transition-duration:3s; 上 # 过 渡 效果 持续 3 秒 * 
-webkit-transition-duration:3s; 

-moz-transition-duration:3s; 

-0-transition-duration:3s; 


【说 明 】 当 鼠标 指向 金鱼 图 片 时 ,金鱼 图 片 向 右 平移 130px， 向 下 平移 10px， 同 时 水 平方 向 


如 果 一 个 元 素 需要 设置 多 种 变形 效果 ， 可 以 使 用 空格 将 多 个 变形 属性 值 隔 开 。 
- 司 ~ lle 
/Dvntomscaled x \b 
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图 10-7 使 用 scale0 方 法 实现 元 素 缩放 


3. 倾斜 


skew0 方 法 用 于 元 素 的 倾斜 显示 ， 也 就 是 将 一 个 对 象 围绕 着 义 轴 和 YY 轴 按 照 一 定 的 角度 倾 
。 该 方法 包含 两 个 参数 ， 分 别 用 来 定义 义 轴 和 YY 轴 坐 标的 倾斜 角度 ， 基 本 语法 格式 如 下 。 

transform: skew(x-angle,y-angle); 

参数 如 下 。 

。 x-angle: 相对 于 义 轴 进行 倾斜 的 角度 值 ， 单 位 为 deg。 

e y-angle: 相对 于 立轴 进行 倾斜 的 角度 值 ， 单 位 为 deg。 

说 明 : 如 果 省 略 第 二 个 参数 ， 则 取 默 认 值 0。 

【 例 10-2-3】 用 skew0 方 法 实现 元 素 的 倾斜 显示 。 当 鼠标 指向 导航 链接 时 ， 超 链接 <a> 出 现 


倾斜 效果 。 本 例 中 ， 当 鼠标 指向 “客户 案例 ”时 ， 页 面 的 显示 效果 如 图 10-8 所 示 ， 代 码 如 下 所 


示 。 


<head> 
<meta charset="utf-8"> 
<title>transform:skewO</title> 
<style> 
nav{ 
background-color#EEEEEE: 
} 
af 
display:inline-block: 
width:90px: 
height:30px: 
line-height:30px: 
text-align:center: 
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background-color:#F F8800: 
text-decoration:none; 
margin:0 2px: 
} 
a:hover{ 
transform:skew(-25deg): 片 相对 于 垂直 方向 顺 时针 转 25”*/ 
-webkit-transform:skew(-25deg): /*Safari 和 Chrome 浏览 器 兼容 代码 */ 
-moz-transform:skew(-25deg): /*Firefox 浏览 器 兼容 代码 所 
-0-transform:skew(-25deg): /*Opera 浏览 器 兼容 代码 */ 
> 
</style> 
<head> 
<body> 
<nav> 
<a hre 全 "#f"> 网 站 首页 </a> 
<a hre 全 "#f"> 产 品 展示 </a> 
<ahre 人 #"> 客 户 案例 </a> 
<a href="#'> 关 于 我 们 </a> 
<a href="#"> 联 系 方式 </a> 
</nav> 
</body> 


【说 明 】CSS3 的 斜 切 坐标 系 和 数学 中 的 坐标 系 完 全 不 一 样 ，CSS3 中 水 平 是 Y 轴 ， 垂 直 是 
义 轴 ， 发 生 倾 斜 时 沿 Y 轴 顺 时 针 旋 转 为 正 ， 沿 六 轴 逆 时 针 旋转 为 正 。 
| D wanstormskew0 x 
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127.0.0.1:8020/AladLed/chapter10/10-2-3.html?_hbt=1556332: 


图 10-8 使 用 skew0 方 法 实现 元 素 倾斜 


4. 旋转 


rotate0 方 法 用 于 旋转 指定 的 元 素 ， 通 过 指定 的 角度 参数 使 元 素 相对 原点 中 心 进行 旋转 ， 基 
本 语法 格式 如 下 。 
transform: rotate(angle): 
参数 : angle 表示 要 旋转 的 角度 值 。 如 果 角 度 为 正 数值 ， 则 顺 时 针 旋 转 ; 否则 ， 逆 时 针 旋 转 。 
【 例 10-2-4】 用 rotate0 方 法 实现 元 素 旋转 。 当 鼠标 指向 图 10-9 中 的 风车 时 ， 风 车 旋转 180” 
并 放大 两 倍 ， 过 渡 时 间 为 3 秒 ， 最 终 效果 如 图 10-10 所 示 ， 代 码 如 下 所 示 。 
<head> 
<meta charset="utf-8"> 
<style> 
div{ 
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width:350px: 
height:350px: 
border: 1px solid #888888: 


height:150px: 
margin: 100px: 
} 
img:hover{ 
transform: rotate(180deg) scale(2.2): /# 顺 时 针 旋 转 180”， 放 大 两 倍 */ 
-webkit-transform:rotate(180deg) scale(2.2); /*Safari 和 Chrome 浏览 器 兼容 代码 */ 
-moz-transfonm:rotate(180deg) scale(2.2): /Firefox 浏览 器 兼容 代码 */ 
-0-transform:rotate(180deg)scale(2,2): /*Opera 浏览 器 兼容 代码 */ 
transition-duration:3s; /# 过 渡 效 果 持续 3 秒 */ 
-webkit-transition-duration:3s; 
-moz-transition-duration:3s; 
-0-transition-duration:3s; 
} 
</style> 
</head> 
<body> 
<div> 
<img sre="img/ 风 车 jpe"> 
</div> 
body> 


EU 一 一 | 加 回国 一 二 -| 


DD transformsrotate0 x 慎 D transform:rotate0 x 
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10-9 ”使 用 rotate0 方 法 实现 风车 旋转 前 图 10-10 使 用 rotate0 方 法 实现 风车 旋转 后 
5. 更 改变 换 的 中 心 点 
transform-origin0 方 法 用 来 设置 元 素 运 动 的 基点 (参照 点 )， 也 就 是 元 素 围 绕 着 哪个 点 变形 或 
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旋转 ， 默 认 基点 是 元 素 的 中 心 点 。 


在 不 使 用 transform-origin0 改 变 元 素 基点 位 置 的 情况 下 ,进行 的 translate、scale、skew 和 rotate 


等 操作 都 是 以 元 素 自己 的 中 心 位 置 进行 变化 的 。 如 果 需 要 在 不 同 的 位 置 对 元 素 进行 这 些 操作 ， 
就 可 以 使 用 transform-origin 来 改变 元 素 的 基点 位 置 ， 使 元 素 基点 不 再 位 于 中 心 位 置 。 


轴 。 


基本 语法 格式 如 下 。 

transform-origin: x-axis y-axis Z-axis: 

参数 如 下 。 

e@ ”x-axis: 定义 视图 被 置 于 X 轴 的 何 处 。 取 值 为 left、center、right、length 和 % 等 ， 默 认 
值 为 50%。 

e@ y-axis: 定义 视图 被 置 于 Y 轴 的 何 处 。 取 值 为 top、center、bottom、length 和 % 等 ， 默 
认 值 为 50%。 

e@ z-axis: 定义 视图 被 置 于 乙 轴 的 何 处 。 取 值 为 leangth， 默 认 值 为 0。 

注意 : 

该 属性 只 有 在 设置 了 transform 属性 的 时 候 起 作用 ，2D 转换 元 素 可 以 改变 元 素 的 义 轴 和 YY 

3D 转换 元 素 还 可 以 更 改元 素 的 乙 轴 。 


【 例 10-2-5】 修 改 例 10-2-4， 实 现 用 transform-origin0 方 法 改变 元 素 的 基点 位 置 。 当 鼠标 指 


向 图 10-11 中 的 风车 时 ， 风 车 旋转 180” 并 缩小 到 原来 的 0.3 倍 ， 基 点 位 置 改变 到 右 下 角 ， 过 渡 
时 间 为 3 秒 ， 最 终 效果 如 图 10-12 所 示 。 修 改 例 10-2-4 中 的 样式 代码 ， 如 下 所 示 。 


<style> 

div{ 
width:300px; 
height:300px: 
border: lpx solid #888888; 

} 

img{ 
‘width:300px: 
height:300px: 
} 

img:hover{ 
transform: rotate(180deg) scale(0.3.0.3): /# 顺 时 针 旋 转 180” ， 缩 小 03 倍 */ 
-webkit-transform:rotate(180deg) scale(0.3.0.3): 。“”/*Safari 和 Chrome 浏览 器 兼容 代码 */ 
-moz-transform:Totate(180deg) scale(0.3.0.3): /*Firefox 浏览 器 兼容 代码 */ 
-0-transform:rotate(180deg) scale(0.3,0.3): /*Opera 浏览 器 兼容 代码 */ 
transform-origin:right bottom:; 人 # 改 变 元 素 基点 位 置 到 右 下 角 */ 
-webkit-transform-origin:right bottom: 
-moz-transform-origin:right bottom: 
-0-transform-origin:right bottom: 
transition-duration:3s: 人 # 过 渡 效 果 持续 3 秒 */ 
-webkit-transition-duration:3s: 
-moz-transition-duration:3s; 
-0-transition-duration:3s: 
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本 
</style> 
【说 明 】 元 素 原来 的 基点 是 自己 的 中 心 位 置 。 
E 加 is  「 
DD transform-origin0 Y= be 口 wansform-origin0 
© |© 127.00.18020/chaptorl0/10-… 会 | 3 C ©12700.1 


图 10-11 元 素 基点 变换 前 图 10-12 元 素 基 点 变换 后 


10.2.4 3D 转换 


在 3D 转换 中 可 以 让 元 素 在 三 维 空间 内 变形 ， 下 面 将 针对 CSS3 中 的 rotateXO 和 rotateYO 
方法 进行 具体 讲解 。 
1. rotateX() 方 法 
rotateX0 方 法 用 于 指定 元 素 围绕 XX 轴 旋 转 ， 基 本 语法 格式 如 下 。 
transform: rotateX(a): 
参数 :参数 a 用 于 定义 旋转 的 角度 值 ， 单 位 为 deg。 值 可 以 是 正 数 ， 也 可 以 是 负数 。 如 果 
值 为 正 ， 元 素 将 围绕 X 轴 顺 时 针 旋 转 ， 反 之 ， 元 素 将 围绕 和 轴 逆 时 针 旋 转 。 
【 例 10-2-6】 用 rotateX0 方 法 实现 元 素 绕 X 轴 旋 转 。 当 鼠标 指向 图 10-13 中 的 图 片 时 ， 图 
片 绕 自己 的 入 轴 旋 转 70”， 过 渡 时 间 为 两 秒 ， 最 终 效果 如 图 10-14 所 示 。 页 面 文件 10-2-6html 
的 关键 代码 如 下 。 
<head> 
<meta charset="utf-8"> 
<title>transform:rotate XO</title> 
<style> 
div{ 
width:380px: 
height:330px: 
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border: 1px solid #333333; 


-webkit-transform:rotateX(70deg); 。 /* 绕 义 轴 旋转 -70”*/ 


图 10-13 图 片 绕 X 轴 旋转 前 图 10-14 图 片 绕 X 轴 旋 转 后 
2. rotateY() 方 法 
rotateY0 方 法 指定 元 素 围绕 轴 旋 转 ， 基 本 语法 格式 如 下 。 
transform: rotateY (a); 


参数 : 参数 a 与 rotateX(a) 中 的 a 含义 相同 ， 用 于 定义 旋转 的 角度 。 如 果 值 为 正 ， 元 素 围绕 
立轴 顺 时 针 旋 转 ， 反 之 ， 元 素 围绕 站 轴 逆 时 针 旋 转 。 

【 例 10-2-7】 修 改 例 10-2-6， 用 rotateY0 方 法 实现 元 素 绕 Y 轴 旋 转 。 当 鼠标 指向 图 10-13 
中 的 图 片 时 ， 图 片 绕 自 己 的 立轴 旋转 50” ， 过 渡 时 间 为 两 秒 ， 最 终 效果 如 图 10-15 所 示 。 修改 
代码 如 下 所 示 。 
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imghover{ 
-webkit-transform:rotateY (50deg): 
transition:all 2s ease 0s: 
3. perspective 属性 


perspective 属性 定义 3D 元 素 与 镜头 ( 即 z=0 平面 ) 的 距离 ， 以 像素 为 单位 。 该 属性 使 具有 三 


维 位 置 变换 的 元 素 产 生 透 视 效果 。 当 为 元 素 定 义 perspective 属性 时 ， 其 子 元 素 会 获得 透视 效 


果 ， 


但 元 素 本 身 没 有 。 

语法 格式 : perspective:number | none; 

参数 如 下 。 

e@ number: 子 元 素 与 镜头 之 间 的 距离 ， 单 位 是 像素 。 

e@ none: 没有 透视 效果 ， 默 认 值 ， 与 number=0 相同 。 

说 明 :perspective 属性 只 影响 3D 转换 元 素 。 目 前 浏览 器 都 不 支持 perspective 属性 , Chrome 


和 Safari 支持 蔡 代 的 -webkit-perspective 属性 。 


【 例 10-2-8】 修 改 例 10-2-7， 设 置 div 盒子 的 子 元 素 3D 旋转 时 的 透视 效果 ， 用 rotateY( 方 


法 实现 元 素 绕 立 轴 旋 转 50”, 过渡 时 间 为 两 秒 , 最 终 效果 如 图 10-16 所 示 。 修改 代码 如 下 所 示 。 


div{ 
width:380px: 
height:330px: 
border: 1px solid #333333; 
-webkit-perspective:500; 店 Safari 和 Chrome 浏览 器 兼容 代码 ， 透 视 效果 */ 
} 


提示 : 
请 与 perspective-origin 属性 一 同 使 用 该 属性 ， 这 样 就 能 够 改变 3D 元 素 的 底部 位 置 。 
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图 10-15 图 片 绕 Y 轴 旋转 后 10-16 图 片 绕 Y 轴 旋 转 的 透视 图 
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4. perspective-origin 属性 


perspective-origin 属性 定义 3D 元 素 基于 的 义 轴 和 YY 轴 ， 用 来 改变 3D 元 素 的 底部 位 置 。 
语法 格式 : perspective-origin: x-axis y-axis; 
参数 如 下 。 
e@ ”x-axis; 定义 视图 在 X 轴 上 的 位 置 。 取 值 为 left、center、right、length、%， 默 认 值 为 
50%。 
@ y-axis: 定义 视图 在 立轴 上 的 位 置 。 取 值 为 ttp、center、bottom、length、%， 默 认 值 为 
50%。 
说 明 : 使 用 perspective-origin 属性 定义 的 是 元 素 的 子 元 素 的 透视 图 ， 而 不 是 元 素 本 身 。 
目前 浏览 器 都 不 支持 perspective-origin 属性 。Chrome 和 Safari 支持 蔡 代 的 -webkit- 
perspecitve-origin 属性 。 
【 例 10-2-9】 修改 例 10-2-8， 改 变 3D 元 素 的 底部 位 置 为 leff， 用 rotateY0 方 法 实现 元 素 绕 
和 轴 旋 转 50”， 过 渡 时 间 为 两 秒 ， 最 终 效果 如 图 10-16 所 示 。 修 改 代码 如 下 所 示 。 
div{ 
width:380px: 
height:330px: 
border: 1px solid #333333; 
-webkit-perspective:500; 访 Safari 和 Chrome 浏览 器 兼容 代码 ， 透 视 效果 */ 
-webkit-perspective-origin:left; A# 改 变 3D 元 素 的 底部 位 置 为 left*/ 


5. backface-visibility 属 性 


backface-visibility 属性 定义 当 元 素 不 面向 屏幕 时 是 否 可 见 。 
语法 格式 : backface-visibility: visible | hidden: 
参数 如 下 。 
e@ visible: 背面 是 可 见 的 ， 默 认 值 。 
e@ hidden: 背面 是 不 可 见 的 。 
【 例 10-2-10】 设计 实现 翻转 扑克 的 效果 ， 当 鼠标 指向 扑克 时 出 现 翻转 。 效 果 如 图 10-17 和 
10-18 所 示 ， 代 码 如 下 。 
<head> 
<meta charset="utf-8"> 
<title>3D 旋转 变形 </title> 
<style type="text/css"> 
divpk{ 
width:162px: 
height:232px: 
border: 1px solid #000: 
position:relative: 
-webkitperspective:300px: /* 定 义 3D 元 素 距 视图 的 距离 */ 
} 
divpk img{ 
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position:absolute: 
top:0: 
left:0: 
-webkit-backface-visibility:hidden: 。 /+ 定义 元 素 在 不 面 对 屏 幕 时 不 可 见 */ 
transition:all 1s ease 0s: 证 定义 过 渡 效 果 */ 
日 
divpk img.pk1{ 
-webkit-transform:rotateY(-180deg);，* 围 绕 Y 轴 旋 转 -180”*/ 
: 
div.pk:hover img.pk1{ 
-webkit-transform:rotateY (0deg): 
div.pk:hover img.pk2{ 
-webkit-transform:rotateY (180deg); 
b 
</style> 
</head> 
<body> 
<div class="pk"> 
<img class="pk1" src="img/pukel.jpe"/> 
<img class="pk2" src="img/puke2.jpg"> 


</div> 
</body> 
[ .Ee le)| 
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图 10-17 翻转 扑克 前 图 10-18 ”翻转 扑克 后 


10.2.5 ”案例 实现 


在 HBuilder 中 创建 一 个 HTMLS5 文档 ， 文 件 名 为 10-2.html， 代 码 如 下 所 示 。 


<head> 
<meta charset="utf-8"> 
<title> 客 户 案例 </title> 
<style> 
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*{padding:0:margin:0:} 
‘imgbox{ 上 * 客 户 案例 的 盒子 样式 */ 
width:325px: 
height:200px: 
position:relative; 
overflow:hidden:; 
} 
imgbox img{ /客户 案例 的 图 片 样式 %/ 
width:325px: 
height:200px: 
} 
-imgbox hgroup{ ”/* 客 户 案例 的 盒子 中 ， 文 本 块 的 样式 */ 
padding-top:20px; 
text-align:center:; 
position:absolute: 
left:0; 
top:-220px; 
width:325px; 
height:200px: 
background:reba(0,0,0,0.5); 
transition:all 0.5s ease-in 0s: 让 过 渡 效 果 */ 
} 
I3{ /*h3 标题 的 样式 */ 
font-size: 16px: 
color: #BBB; 让 文字 颜色 为 浅 灰色 */ 
font-weight:500; /文字 粗细 为 500*/ 
margin-top:15px: 
} 
div.imgbox:hover hgroup{ 记 鼠 标 指向 时 ， 文 本 块 下 滑 */ 
position:absohute: 
left:0; 
top:0; 
} 
</style> 
</head> 
<body> 
<div class="imgbox"> 
<img ste="img/led jgd9 jpe" /> 
<heroup> 
<h3> 日 照 水 运 基 地 </h3> 
<h3> 日 照 奥林匹克 水 上 公园 </h3> 
<h3> 日 照 水 上 运动 中 心 夜景 亮 化 </h3> 
</hgroup> 
</div> 
<body> 
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运行 该 文件 ， 在 Chrome 浏览 器 中 的 显示 效果 如 图 10-3 和 图 10-4 所 示 。 


罗 贡 动画 设计 


CSS3 除了 支持 渐变 、 过 渡 和 转换 特效 外 ， 还 可 以 实现 强大 的 动画 效果 。 在 CSS3 中 ， 使 用 
animation 属性 可 以 定义 复杂 的 动画 。 本 节 将 对 动画 中 的 @keyframes 规则 以 及 animation 相关 属 
性 进行 详解 。 


10.3.1 @keyframes 规则 


在 CSS3 中 ， @keyframes 定义 关键 帧 , 关键 帧 表示 动画 过 程 中 的 状态 。 在 @keyframes 中 规 
定 某 套 CSS 样式 ， 从 一 套 CSS 样式 逐渐 变化 为 另 一 套 CSS 样式 的 过 程 ， 就 实现 了 动画 效果 。 
@keyframes 规则 的 语法 格式 如 下 。 
@keyframes animationname{ 
keyframes-selector {css-styles:} 
有 
参数 如 下 。 
e animationname: 动画 的 名 称 ， 将 作为 引用 时 的 唯一 标识 ， 不 能 为 空 。 
e@ keyframes-selector: 关键 帧 选择 器 , 规定 当前 关键 帧 要 应 用 到 整个 动画 过 程 中 的 时 间 点 ， 
取 值 为 百分比 (百分比 是 指 动画 完成 一 遍 的 时 间 长 度 的 百分比 )、from 或 to。 其 中 ，from 
和 0% 效 果 相 同 ， 是 动画 的 开始 时 间 ; to 和 100% 效 果 相同 ， 是 动画 的 结束 时 间 。 
e@ css-styles: 当前 关键 帧 的 CSS 样式 , 定义 执行 到 当前 关键 帧 时 对 应 的 动画 状态 , 由 CSS 
样式 属性 定义 ， 多 个 属性 之 间 用 分 号 分 隔 ， 不 能 为 空 。 
说 明 : 目前 浏览 器 都 不 支持 @keyframes 规则 。 Firefox 支持 蔡 代 的 @-moz-keyframes 规则 。 
Opera 支持 替代 的 @-o-keyframes 规则 。Safari 和 Chrome 支持 替代 的 @-webkitkeyframes 规则 。 
例如 : 创建 名 为 fontstyle 的 动画 ， 该 动画 在 开始 时 的 状态 为 文本 大 小 14px、 红 色 ， 在 动画 
的 30% 处 变 为 文本 大 小 20px、 绿 色 ， 然 后 动画 效果 持续 到 70% 处 , 动画 结束 时 的 状态 为 文本 大 
小 14px、 蓝 色 。 代 码 如 下 。 


@keyframes "fontstyle" 

£ 
from {font-size:14px:color:red:} /# 动 画 开始 时 的 状态 ， 文 本 大 小 为 14px， 红 色 */ 
30%，70%{ font-size:20px:color:green:} /* 动 画 的 中 间 状 态 ， 文 本 大 小 为 20px， 绿 色 */ 
to { font-size:14px:color:blue:} 片 动画 结束 时 的 状态 ， 文 本 大 小 为 14px， 蓝 色 */ 

} 

注意 : 

必须 定义 0% 和 100% 选 择 器 。 
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10.3.2 animation 属性 


animation 属性 是 简写 属性 ， 用 于 设置 下 面 的 6 个 动画 属性 。 
1. animation-name 属性 
该 属性 定义 动画 的 名 称 ， 为 @keyframes 规则 规定 的 名 称 ， 语 法 格式 如 下 。 


animation-name: keyframename | none 
参数 : keyframename 参 数 用 于 定义 为 元 素 应 用 的 动画 的 名 称 , 必须 与 @keyframes 配 合 使 用 ， 


因为 动画 名 称 由 @keyframes 定 义 。none 则 表示 不 应 用 任何 动画 ， 通 常用 于 覆盖 或 取消 动画 。 


2. animation- duration 属性 

该 属性 规定 完成 动画 所 花费 的 时 间 ， 以 秒 或 毫秒 计 ， 语 法 格式 如 下 。 

animation-duration: time 

参数 ，time 参数 是 以 秒 (s) 或 毫秒 (ms) 为 单位 的 时 间 ， 默 认 值 为 0， 表 示 没 有 任何 动画 效果 。 


当 值 为 负数 时 ， 则 被 视 为 0。 


动画 中 必须 有 animation-duration 属性 ， 否 则 时 长 为 0， 不 会 播放 动画 。 

3. animation- timing-function 属性 

该 属性 规定 动画 的 速度 曲线 ， 定 义 使 用 哪 种 方式 来 执行 动画 效果 ， 语 法 格式 如 下 。 
animation-timing-function: Value 

参数 : value 取 值 为 linear、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n) 等 常用 属性 
默认 属性 值 为 ease， 适 用 于 所 有 的 块 级 元 素 和 行 级 元 素 。 


4. animation-delay 属性 

该 属性 定义 执行 动画 效果 之 前 延迟 的 时 间 ， 即 规定 动画 什么 时 候 开 始 ， 语 法 格式 如 下 。 
animation-delay: time 

参数 :time 参数 是 以 秒 (s) 或 毫秒 (ms) 为 单位 的 时 间 ， 默 认 值 为 0。 

5. animation-iteration-count 属性 

该 属性 定义 播放 动画 的 次 数 ， 语 法 格式 如 下 。 

参数 : 属性 值 为 infinite 时 ， 指 定 动画 循环 播放 ， 属 性 值 为 number 时 ， 定 义 播 放 动画 的 次 
初始 值 为 1。 


6. animation-direction 属性 
该 属性 定义 动画 播放 的 方向 ， 即 动画 播放 完成 后 是 否 逆向 交 蔡 循环 ， 语 法 格式 如 下 。 


animation-direction:normal | altemate 


263 


HTML5+CSS3 网 页 设计 苦 础 


参数 : 默认 值 normal 表示 动画 每 次 都 会 正常 显示 。 属 性 值 是 altemate 时 ， 动 画 会 在 奇数 次 
(1、3、5 等 ) 正 常 播放 ， 而 在 偶数 次 (2、4、6 等 ) 逆 向 播放 。 


7. animation 属性 


animation 属性 是 简写 属性 ， 用 于 在 一 个 属性 中 设置 animation-name、animation-duration、 
animation-timing-function、animation-delay、animation-iteration-count 和 animation-direction 这 6 
个 动画 属性 ， 基 本 语法 格式 如 下 。 

animation: animation-name animation-duration animation-timing-fomction animation-delay 
animation-iteration-count animation-direction 

在 上 述 语法 中 ， 使 用 animation 属性 时 必须 指定 animation-name 和 animation-duration 属性 ， 
否则 持续 时 间 为 0， 永 远 不 会 播放 动画 。 

【 例 10-3-1】 设计 动画 ， 动 画 过 程 为 射 灯 图 片 旋转 、 缩 小 、 透 明度 变 小 ， 动 画 所 花费 的 时 
间 为 5 秒 ， 匀 速 执行 ， 逆 向 交 蔡 循环 播放 。 初 始 效果 和 结束 效果 如 图 10-19 所 示 ， 中 间 状 态 效果 
如 图 10-20 所 示 ， 页 面 文件 10-3-1.html 的 关键 代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<title>HTMLS 动画 <jtitle> 
<style> 

div{ 
width:350px; 
height:350px; 
border: 1px solid #333333; 
font-size:40px: 
text-align:center: 
line-height:350px: 
position:relative: 
z-index:10; 店 堆 天 顺序 */ 

! 

img{ 
width:300px: 
height:300px: 
position:absolute: 
top:25px; 
left:25px: 
z-index:100; 
animation-name:sdmove: 族 定 义 动画 名 称 */ 
animation-duration:5s: 族 定 义 动画 时 间 */ 
animation-timing-function:linear。”/* 过 渡 效 果 */ 
animation-iteration-count:infinite: ” /* 动 画 无 限 循环 */ 
animation-direction:altemate: 证 动画 逆向 交 蔡 循环 播放 */ 
/*Safari 和 Chrome 浏览 器 兼容 代码 */ 


-webkit-animation-name:sdmove: 
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-Webkit-animation-duration:Ss: 
-webkit-animation-timing-function:linear: 
-webkit-animation-iteration-count-infinite; 
-webkit-animation-direction:alternate: 


@keyframes sdmove{ 
from {transform: scale(1,1) rotate(0deg):opacity:1:} 
5% {transform: scale(1.1) rotate(0deg):opacity:1:} 
50% {transform: scale(0.3,0.3) rotate(180deg):opacity:0.3;} 
95% {transform: scale(1.1) rotate(360deg):opacity:1:} 
to{transform: scale(1.1) rotate(360deg):opacity:1:} 
b 
@-webkit-keyframes sdmove{ 
from {transform: scale(1,1) rotate(0deg):opacity:1:} 
5% {transform: scale(1.1) rotate(Odeg):opacity:1:} 
50% {transform: scale(0.3.0.3) rotate(180deg):opacity:0.3:} 
95% {transform: scale(1.1) rotate(360deg):opacity:1:} 
to{transform: scale(1,1) rotate(360deg):opacity:1:} 
} 
</style> 
</head> 
<body> 
<div> 
LED 射 灯 
<img ste="img/led sdlijpg'> 
<div> 
<body> 


7 D HrMt5a 四 xR 
C |© 12700.1:8020/chaptorl... 全 | : 


[oe x 本 


GC |© 12700.1:8020/chaptorl.. 全 | : 


LED 射 灯 


图 10-19 动画 的 起 始 和 结束 状态 10-20 动画 的 中 间 状 态 


【说 明 】(1) z-index 属性 设置 元 素 的 堆 释 顺序 ， 拥 有 更 高 堆 羡 顺序 的 元 素 总 是 会 处 于 堆 合 顺 
序 较 低 的 元 素 的 前 面 . (2) 为 了 使 图 片 的 初始 状态 和 结束 状态 稳定 , 动画 的 起 始 帧 和 596 帧 相同 ， 
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结束 帧 和 9596 帧 相同 。(3) 动画 处 于 中 间 状 态 时 ， 图 片 透明 度 降 为 03， 逐 渐 看 到 下 面 的 文字 。 
使 用 animation 属性 可 以 将 例 10-3-1 中 img 样式 内 的 关于 定义 动画 的 语句 合并 简写 ， 合 并 
后 的 代码 如 下 。 
animation:sdmove Ss linear infinite alternate: 
-webkit-animation:sdmove Ss linear infinite altemate: 


实 训 


【 实 训 任务 】 创建 热 销 产品 局 部 页 面 ， 当 鼠标 指向 图 片 时 ,图片 1 翻转 隐藏 ， 图 片 2 翻转 显 
示 ， 鼠 标 离开 时 恢复 初始 状态 。 在 浏览 器 中 的 显示 效果 如 图 10-21 和 图 10-22 所 示 。 


© |@127001:8020/AladLed/chaprerlD/10 .4html?_hbt=1535701810184 


© |1@1270018020/Aadled/chapterlo/10-4html 


图 10-22 热 销 产品 页 面 效果 图 2 


【知识 要 点 】transition、transform、CSS3 变形 和 转换 等 动画 技术 。 
【 实 训 目 标 】 掌 握 transition 过 渡 属 性 的 功能 和 用 法 ; transform 变换 函数 及 其 用 法 ; 用 CSS3 
变形 和 转换 技术 实现 动画 。 
(1) 启动 HBuilder， 把 需要 的 图 片 复 制 到 img 文件 夹 中 。 
(2) 新 建 一 个 HTMLS5 文档 ， 文 件 名 为 10-4.html。 在 编辑 区 编辑 网 页 文档 ， 页 面 结构 代码 
如 下 。 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tile> 热 销 产品 </title> 
ink href="css/10-4.css” type="textcss" rel="stylesheet"> 
</head> 
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<body> 
<div id="hotproduct"> 
<U> 
<li> 
<img class="zheng" src="img/led sdljpg> 
<img class="fan"sre="img/led sd2jpg> 
<> 
<li class="evenlist"> 
<strong>LED 射 灯 </strong> 
专业 技术 <br> 
高 效 耐 用 <br> 
<a href="#"> 详 细 信 息 </a> 
<> 
<I> 
<img class="zheng" src="img/led jgd7.jpe"> 
<img class="fan"src="img/led jgd6jpg"> 
<> 
<li class="evenlist"> 
<strong>LED 景观 路 灯 </strong> 
优越 品质 <br> 
绿色 环保 <br> 
<a href="#"> 详 细 信 息 </a> 
<> 
<l> 
<img class="zheng" stc="img/led ngdljpg > 
<img class="fan"src="img/led ngd2.jpg"> 
<> 
<li class="evenlist"> 
<strong>LED 壳 虹 灯 </strong> 
领先 科技 <br> 
节能 高 效 <br> 
<a hre 仁 "#"> 详 细 信 息 </a> 
</> 
<li> 
<img class="zheng" src="img/led_wldl.jpe"> 
<img class="fan"src="img/led_ wld3.jpe"> 
<> 
<li class="lastlist"> 
<strong>LED 瓦楞 灯 </strong> 
优越 品质 <br> 
优质 体验 <br> 
<ahre 全 "#i> 详 细 信息 </a> 
<i> 
< 
</div> 
</body> 
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<html> 
(3) 在 css 文件 夹 下 新 建 一 个 样式 文件 ， 文 件 名 为 10-4.css， 代 码 如 下 。 
pt 上 # 针 对 所 有 的 HTML 元 素 定义 样式 */ 
margin:0: 刻 外 边 距 为 0px*/ 
padding:0: 证 内 边 距 为 Opx*/ 
box-sizing:border-box: /盒子 的 宽度 值 和 高 度 值 包含 元 素 的 内 边 距 和 边框 所 
} 
af 片 设置 超 链接 的 样式 */ 
text-decoration:none; 片 无 修饰 */ 
} 
热 销 产品 盒子 样式 的 定义 。 
#hotproduct{ 
width:1050px: 
height:auto; 


} 
热 销 产品 展示 用 无 序列 表 实现 ， 定 义 无 序 列表 的 样式 。 


#hotproduct ul{ 方 设置 热 销 产品 列表 的 样式 */ 
list-style:none: /# 不 显示 项 目 符号 所 
width:1050px: 
height:158px: 
padding:6px 0 Opx 4px: /# 上 、 右 、 下 、 左 内 边 距 依次 为 6px、0px、0px、4px*/ 
border:2px solid #DDDDDD: /# 热 销 产品 区 的 边框 为 2px 的 灰色 实 线 */ 


} 
要 实现 图 片 翻转 的 立体 效果 ， 在 图 片 的 父 元 素 中 定义 perspective 属性 ， 实 现 透 视 效 果 。 


#hotproduct ul li{ 片 设置 热 销 产品 列表 项 的 样式 */ 
width:160px: 
display:inline-block: 刻 内 联 元 素 */ 
float:left: 证 向 左 浮动 */ 
margin-right: 10px: 人 # 右 外 边 距 为 10px*/ 
margin-bottom: 1px: 让 下 外 边 距 为 1px*/ 
position:relative; 上 # 相 对 定位 所 
-webkit-perspective:250px: 广 透 视 效果 : 子 元 素 与 镜头 之 间 的 距离 为 250px*/ 


} 
偶数 列 (文本 列 )， 定 义 样式 。 


#hotproduct ul lievenlist { 片 设置 热 销 产品 列表 项 中 偶数 项 的 样式 */ 
width:80px: 
height:148px: 
border-right: 1px solid #ddd: 片 右边 框 为 1px 的 灰色 实 线 */ 
} 
最 后 一 列 不 设置 右边 框 ， 单 独 定 义 样式 。 
#hotproduct ul lilastlist{ 片 设 置 热 销 产 品 列表 项 中 最 后 一 项 的 样式 */ 
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width:80px: 

height:148px: 

border-right: Opx: 证 不 设置 右边 框 */ 
} 


定义 图 片 样式 ， 实 现 图 片 翻转 后 ， 背 面 不 可 见 。 初 始 状 态 为 图 片 1 不 翻转 ， 正 面 可 


片 2 翻转 -180”， 背 面 不 可 见 。 当 鼠标 指向 列表 项 站 时 ， 图 片 1 翻转 180”， 背 面 不 可 


片 2 翻 转 0”， 正 面 可 见 。 


#hotproduct ul li img{ 片 设置 热 销 产品 列表 项 中 图 像 的 样式 */ 
width:160px; 
height:141px; 
position:absolute; 证 绝对 定位 */ 
left:0; /# 离 左 侧 0px*/ 
top:0; 证 离 顶 部 0px*/ 
-webkit-backface-visibility:hidden: 广元 素 背 面 不 可 见 */ 
transition:all 0.5s ease-in 0s: /#*0.5 秒 完成 动画 */ 

} 

#hotproduct ul li img fan{ 作 设 置 图 片 的 样式 */ 

-webkit-transform:rotateX(-180deg); /# 图 像 沿 X 轴 3D 旋转 -180”*/ 
b 


#hotproduct ul li:hover img fan{ 人 #* 设 置 鼠 标 悬 停 在 图 片上 时 的 样式 %/ 
-webkit-transform:rotateX(0deg); 。“/* 图 像 沿 义 轴 3D 旋转 0”*/ 
} 
#otproduct ul ihover img zheng { 
-Webkit-transform:rotateX(180deg): 
} 


文本 加 粗 显 示 ， 通 过 设置 外 边 距 调整 布局 。 


#hotproduct strong{ 证 定 义 strong 样式 */ 
display:block: 刻 块 级 元 素 */ 
margin:10px 0 0 0; 让 上 、 右 、 下 、 左 内 边 距 依次 为 10px、0px、0px、0px*/ 


} 
通过 CSS 样式 将 超 链 接 的 样式 设计 成 按钮 样式 。 
#hotproduct a{ 让 设 置 热 销 产品 区 中 超 链接 的 样式 */ 
display:inline-block: 
width:75px: 
height:26px: 
background-color:#494949: 
font-size:13px: 
COolor:#FFF : 
text-decoration:none; 
text-align:center: 
margin-top:15px: 
line-height:26px : 
} 
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#hotproduct arafter{ 证 在 超 链接 后 插入 内 容 */ 
content-url(../img/triangle-icon-white.png): 片 插入 图 片 */ 
padding-left:Spx: 片 左 内 边 距 为 5px*/ 


人 在 浏览 器 中 浏览 制作 完成 的 页 面 ， 页 面 显示 效果 如 图 10-21 和 图 10-22 所 示 。 


本 章 小 结 


本 章 首 先 介绍 了 CSS3 中 的 过 渡 和 变形 , 重点 讲解 了 过 渡 属性 及 2D 转换 和 3D 转换 。 然 后 ， 
讲解 了 CSS3 中 的 动画 特效 及 其 主要 相关 属性 。 最 后 ， 通 过 热 销 产品 局 部 页 面 的 设计 ， 练 习 
animation 过 渡 、 变 形 等 技术 在 网 页 设计 中 的 实际 应 用 。 


练习 题 


1. 通过 transition 相关 属性 实现 按钮 的 边框 阴影 过 渡 效 果 。 要求 当 鼠标 指向 按钮 时 ,按钮 背 
景色 加 深 ， 边 框 出 现 阴影 ， 过 渡 时 间 为 1 秒 ， 如 图 10-23 和 图 10-24 所 示 。 
| 网 站 首页 | | 

图 10-23 按钮 图 10-24 ”为 按钮 加 边框 阴影 


2. 设计 实现 如 下 效果 ， 当 鼠标 指向 图 10-25 所 示 的 图 片 时 ， 图 片 旋转 45”、 放 大 1.5 倍 、 
边框 变 成 圆 形 ， 如 图 10-26 所 示 。 


图 10-25 图片 的 初始 状态 图 10-26 图片 的 最 终 状态 


3. 通过 2D 及 3D 转换 制作 翻转 导航 条 的 效果 ， 当 鼠标 指向 导航 超 链接 时 ， 发 生 翻 转 ， 如 
图 10-27 和 图 10-28 所 示 。 


GC | © 127.0.0.1:8020/Aladled excise/c 


图 10-27 翻转 导航 条 状态 1 图 10-28 翻转 导航 条 状态 2 
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4. 使 用 animation 属性 制作 一 个 动画 ,实现 几 张 图 片 自 左 向 右 循环 滚动 显示 ,效果 如 图 10-29 
所 示 。 
[ 


10-29 ”图 片 滚动 显示 效果 图 
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多 媒体 技术 


在 网 页 设计 中 ， 多 媒体 技术 主要 是 指 在 网 页 上 运用 音频 、 视 频 等 传递 信息 的 一 种 方式 。 在 
网 络 传输 速度 越 来 越 快 的 今天 ， 音 频 和 视频 技术 已 经 被 越 来 越 广泛 地 应 用 到 网 页 设计 中 。 与 静 
态 的 图 片 和 文字 相 比 ， 音 频 和 视频 可 以 为 用 户 提供 更 直观 、 更 丰富 的 信息 。 本 章 将 对 HTML5 
多 媒体 的 特性 以 及 创建 音频 和 视频 的 方法 进行 详解 。 


本 章 的 学 习 目 标 : 

e@ 熟悉 HTML5 多 媒体 特性 。 

了 解 HIMLS 支持 的 音频 和 视频 格式 。 

掌握 HTMLS5 中 视频 的 相关 属性 ， 能 够 在 HTMLS5 页 面 中 添加 视频 文件 。 
掌握 HTMLS5 中 音频 的 相关 属性 ， 能 够 在 HTMLS5 页 面 中 添加 音频 文件 。 
了 解 HIML5 中 视频 、 音 频 的 一 些 常见 操作 ， 并 能 够 应 用 到 网 页 制作 中 。 


Emal HTMLS 多 媒体 特性 


在 HIML5 出 现 之 前 , 多 媒体 内 容 在 大 多 数 情 况 下 都 是 通过 第 三 方 插件 或 集成 到 Web 浏览 
器 中 的 应 用 程序 而 置 于 页 面 内 的 。 例 如 ， 通 过 Adobe 的 Flash Player 插件 将 视频 和 音频 嵌入 到 
网 页 中 。 通 过 这 样 的 方式 实现 的 多 媒体 功能 ， 不 仅 需要 借助 第 三 方 插件 ， 而 且 实 现代 码 复杂 且 
宛 长 。 

HIML5 中 新 增 了 video 标 签 和 audio 标 签 ， 可 以 实现 多 媒体 内 容 的 定义 和 倍速 播放 。 在 
HIML5 语 法 中 ，video 标 签 用 于 为 页 面 添 加 视频 ，audio 标 签 用 于 为 页 面 添加 音频 ， 不 需要 第 三 
方 插件 的 支持 就 能 播放 媒体 文件 。 这 样 用 户 不 必 下 载 第 三 方 插件 ， 就 可 以 直接 观看 网 页 中 的 多 
媒体 内 容 。 


11.1.1 多 媒体 格式 


运用 HIML5 的 video 和 audio 标签 可 以 在 页 面 中 嵌入 视频 或 音频 文件 , 如 果 想 要 这 些 文件 
在 页 面 中 加 载 播放 ， 还 需要 设置 正确 的 多 媒体 格式 。 下 面具 体 介 绍 HTMLS5 中 视频 和 音频 的 一 
些 常见 格式 。 
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1. 视频 格式 


视频 格式 包含 视频 编码 、 音 频 编码 和 容器 格式 .在 HIML5 中 嵌入 的 视频 格式 主要 包括 Ogg、 
MPEG4、WebM 等 ， 具 体 介绍 如 下 。 

e@ Ogg: 带 有 Theora 视频 编码 和 Vorbis 音频 编码 的 Ogg 文件 ，Ogg 是 完全 免费 、 开 放 和 
没有 专利 限制 的 。 

e MPEG4: MPEG4 是 一 种 网 络 视频 图 像 压缩 编码 标准 ， 支 持 MPEG4 标 准 的 文件 格式 有 
很 多 种 ， 比 如 常见 的 MP4 和 AVI， 其 中 MP4 是 支持 MPEG4 的 标准 音频 视频 文件 。 

e WebM: WebM 是 一 种 开放 、 免 费 的 媒体 文件 格式 ， 其 中 包括 VP8 影 片 轨 和 Ogg Vorbis 
音 轨 ， 并 且 是 基于 HTML5 标 准 的 。 


2. 音频 格式 


音频 格式 是 指 在 计算 机 内 播放 或 处 理 的 音频 文件 的 格式 。 在 HIML5 中 霸 入 的 音频 格式 主 
要 包括 Ogg Vorbis、MP3、Wav 等 ， 具 体 介绍 如 下 。 

e@ ”Ogg Vorbis: 是 类 似 于 AAC 的 另 一 种 免费 、 开 源 的 音频 编码 ， 是 用 于 蔡 代 MP3 的 下 一 
代 音 频 压缩 技术 。Ogg 是 一 种 音频 压缩 格式 ， 类 似 于 MP3 等 音乐 格式 。 

e MP3: 是 一 种 音频 压缩 技术 ， 全 称 是 动态 影像 专家 压缩 标准 音频 层面 3Moving Picture 
Experts Group Audio Layer， 简 称 MP3)。 它 被 设计 用 来 大 幅度 地 降低 音频 数据 量 。 

e Wav: 是 录音 时 采用 的 标准 Windows 文件 格式 ， 文 件 的 扩展 名 为 .wav， 数 据 本 身 的 格 
式 为 PCM 或 压缩 型 ， 属 于 无 损 音乐 格式 的 一 种 。 


11.1.2 支持 多 媒体 的 浏览 


到 目前 为 止 , 很 多 浏览 器 已 经 实现 了 对 HTMLS5 中 video 和 audio 元 素 的 支持 。 各 浏览 器 的 
支持 情况 如 表 11-1 所 示 。 


表 11-1 浏览 器 对 video 和 audio 元 素 的 支持 情况 


浏 览 器 支持 版 本 
正 9.0 及 以 上 版 本 
Firefox 3.5 及 以 上 版 本 
era 10.5 及 以 上 版 本 
Chrome 3.0 及 以 上 版 本 
Safari 32 及 以 上 版 本 


表 11-1 列举 了 各 种 浏览 器 对 video 和 audio 元 素 的 支持 情况 。 在 不 同 的 浏览 器 上 显示 视频 
的 效果 略 有 不 同 ，11.2.1 节 的 图 11-1 和 图 11-2 分 别 是 视频 在 Chrome 和 正 浏览 器 中 的 显示 
效果 。 

对 比 图 11-1 和 图 11-2 可 以 看 出 ， 在 不 同 的 浏览 器 中 ， 相 同 的 视频 ， 播 放 控件 的 显示 样式 
却 不 同 。 这 是 因为 每 一 个 浏览 器 对 内 置 视频 控件 样式 的 定义 不 同 ， 这 也 就 导致 在 不 同 浏览 器 中 
会 显示 不 同 的 控件 样式 。 
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嵌入 视频 和 音频 


11.2.1 在 HTML5 中 嵌入 视频 


在 HIML5 中 ，video 标签 用 于 在 HIMLS 文档 中 嵌入 视频 内 容 ， 比 如 电影 片段 或 其 他 视频 
流 。 它 支持 三 种 视频 格式 ， 分 别 为 Ogg、WebM 和 MPEG4， 基 本 语法 格式 如 下 。 

<video src="url"” controls="controls"> 文 字 </video>; 

参数 : 

@ src 属性 用 于 设置 视频 文件 的 路 径 ， 属 性 值 url 表示 要 播放 的 视频 的 URL。 

e controls 属性 用 于 为 视频 提供 播放 控件 。 

说 明 : 这 两 个 属性 是 video 元 素 的 基本 属性 ， 并 且 <video> 和 </video> 之 间 还 可 以 插入 文字 ， 
用 于 在 不 支持 video 元 素 的 浏览 器 中 显示 。 下 面 通过 一 个 案例 来 演示 嵌入 视频 的 方法 。 

【 例 11-2-1】 在 页 面 上 播放 视频 。 本 例 在 Chrome 浏览 器 中 的 显示 效果 如 图 11-1 所 示 ， 在 
正 浏览 器 中 的 显示 效果 如 图 11-2 所 示 。 页 面 文件 11-2-1.html 的 代码 如 下 。 

<html> 

<head> 

<meta charset="utf-8"> 


<title> 在 HTMLS 中 嵌入 视频 </title> 

</head> 

<body> 

<video src="media/Sea.mp4" controls="controls" > 你 的 浏览 器 不 支持 video 标签 </video> 
<body> 

</html> 


口 在 HTML5 中 嵌入 视频 «x 二 


CC © 127.0.0.1:8020/Aladled/chapter11/11-2-1.html?_hbt=155... 食 


Ml 0:03/0:46 
一 一 一 


11-1 在 Chrome 浏览 器 中 的 显示 效果 
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图 11-2 在 正 浏 览 器 中 的 显示 效果 
在 video 元 素 中 还 可 以 添加 其 他 属性 , 以 进一步 优化 视频 的 播放 效果 , 具体 如 表 11-2 所 示 。 
表 11-2 video 元 素 的 常见 属性 


局 性 | 位 | Eu 

antopla 当 页 面 载 入 完成 后 自动 播放 视频 

loop | loop | 视频 结束 重新 开始 播放 

preload 如 果 出 现 该 属性 ， 则 视频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 。 
如 果 使 用 autoplay， 则 忽略 该 属性 

poster | 当 视频 缓冲 不 足 时 ， 该 属性 链接 一 幅 图 像 ， 并 将 该 图 像 按照 一 定 
的 比例 显示 出 来 

| muted | 视频 的 音频 输出 被 静音 

width 设置 视频 播放 器 的 宽度 

height | pixels 。 | 设置 视频 播放 器 的 高 度 


【 例 11-2-2】 修 改 例 11-2-1， 实 现在 页 面 上 自动 和 循环 播放 视频 。 本 例 在 正 浏览 器 中 的 显 
示 效 果 如 图 11-3 所 示 。 在 页 面 文件 11-2-2.html 中 要 修改 的 代码 如 下 所 示 。 

<body> 

<video src="media/Sea mp4" controls="controls" autoplay="autoplay" loop="loop"> 你 的 浏览 器 不 支持 video 
标签 </video> 

<body> 

说 明 : 当 鼠 标 指向 图 11-3 中 的 视频 画面 时 ， 界 面 底部 会 出 现 如 图 11-2 所 示 的 视频 控件 ， 
用 于 控制 视频 播放 的 状态 。 
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图 11-3 在 正 浏 览 器 中 自动 循环 播放 的 显示 效果 


11.2.2 在 HTML5 中 嵌入 音频 


在 HIML5 中 ，audio 标签 用 于 在 HTMLS5 文档 中 嵌入 音频 文件 ， 支 持 三 种 音频 格式 ， 分 别 
为 Ogg、MP3 和 Wav， 基 本 格式 如 下 。 

<audio src= "url" controls= "controls"></audio> 

各 参数 的 功能 可 参考 video 标签 的 参数 及 说 明 。 

下 面 通过 一 个 案例 来 演示 赚 入 音频 的 方法 。 

【 例 11-2-3】 在 页 面 上 播放 音频 。 本 例 在 Chrome 浏览 器 中 的 显示 效果 如 图 11-4 所 示 。 页 
面 文件 11-2-3.html 的 关键 代码 如 下 。 

<head> 

<meta charset="utf-8"> 


<title> 在 HIMLS 中 嵌入 音频 </title> 
</head> 


<body> 
<audio src="media/Grace mp3" controls="controls"> 你 的 浏览 器 不 支持 audio 标签 </audio> 
</body> 
图 11-4 显示 的 是 音频 控件 ， 用 于 控制 音频 文件 的 播放 状态 ， 单 击 “ 播 放 ” 按 钮 时 ， 即 可 播 
放 音 频 文件 。 


C |01270018020/AladL， 廊 | : 


bo00/258 ® 0 一 四 # 


l 


播放 


图 11-4 音频 播放 效果 


另外 , 在 audio 元 素 中 还 可 以 添加 其 他 属性 , 以 进一步 优化 音频 的 播放 效果 , 具体 如 表 11-3 
所 示 。 
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表 11-3 audio 元 素 的 常见 属性 


属 性 值 描 述 
autoplay autoplay 当 页 面 载 入 完成 后 自动 播放 音频 
loop | om 音频 结束 时 重新 开始 播放 
preload preload 如 果 出 现 该 属性 ， 则 音频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 。 如 果 使 


用 autoplay， 则 忽略 该 属性 


表 11-3 中 列举 的 audio 元 素 的 属性 和 video 元 素 的 属性 是 相同 的 ， 这 些 相同 的 属性 在 嵌入 
音 视频 时 是 通用 的 。 


11.2.3” 音 视频 中 的 source 元 素 


1. 不 同 浏览 器 对 音 视频 文件 的 支持 
虽然 HTML5 支持 Ogg、MPEG4 和 WebM 视频 格式 以 及 Ogg Vorbis、MP3 和 Wav 音频 格 
式 ， 但 各 浏览 器 对 这 些 格式 却 不 完全 支持 ， 有 具体 如 表 11-4 所 示 。 
表 11-4 不 同 浏览 器 对 音 视频 文件 的 支持 


[Iw | 蔡 | | | 靖 | 
[ww | | 请 | 请 | 二 | 


2. 多 源 视 频 文件 的 使 用 

为 了 使 音频 、 视 频 能 够 在 各 个 浏览 器 中 正常 播放 ， 往 往 需要 提供 多 种 格式 的 音频 、 视 频 文 
件 。 在 HIML5 中 ，video 元 素 允 许多 个 source 元 素 ， 每 个 source 元 素 可 以 链接 不 同 的 视频 文 
件 ， 浏 览 器 将 使 用 第 一 个 可 识别 的 格式 。 运 用 video 元 素 添加 多 个 视频 的 基本 格式 如 下 。 

<video controls= "controls"> 


<source src="url"” type="video/type name"> 
<source src="url"” type="video/type name"> 


在 上 面 的 语法 格式 中 ， 可 以 指定 多 个 source 元 素 为 浏览 器 提供 备用 的 视频 文件 。source 元 
素 一 般 设置 两 个 属性 。 

e@ src: 用 于 指定 媒体 文件 的 URL 地 址 。 

e@ type: 指定 媒体 文件 的 类 型 ，type name 取 值 为 Ogg、MPEG4 和 WebM 等 。 

【 例 11-2-4 为 页 面 添加 多 个 浏览 器 都 支持 的 视频 文件 。 本 例文 件 11-2-4.html 的 代码 如 下 。 
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<html> 
<head> 
<meta charset="utf-8"> 
<tite> 多 源 视频 文件 <title> 
</head> 


<body> 
<video controls="controls"> 
<source src="media/Sea mp4" type="video/mp4"> 
<source src="media/Sea.oge" type="video/oge"> 
<source src="media/Sea.webm" type="video/webm"> 
</Video> 
</body> 
<html> 
【说 明 】 用 户 在 浏览 例 11-2-4 所 示 的 网 页 时 ， 浏 览 器 会 播放 自己 支持 的 文件 ， 正 和 Safari 
会 播放 MP4 格式 的 文件 ，Firefox、Opera 和 Chrome 会 播放 Ogg 或 WebM 格式 的 文件 。 采 用 这 
种 方式 ， 可 以 保证 用 户 无 论 使 用 哪 种 浏览 器 ， 都 能 播放 视频 。 


2. 多 源 音 频 文件 的 使 用 


在 HTML5 中 ， 运 用 source 元 素 可 以 为 audio 元 素 提供 多 个 备用 文件 。 运 用 source 元 素 添 
加 多 个 音频 的 基本 格式 如 下 。 
<audio controls="controls"> 
<source sre="url" type="audio/type name"> 
<source sre="url" type="audio/type name"> 


参数 如 下 。 
e src: 用 于 指定 媒体 文件 的 URL 地 址 。 
e@ type: 指定 媒体 文件 的 类 型 ，type name 取 值 为 Ogg、MP3 和 Warv 等 。 
例如 ， 在 Firefox 4.0 和 Chrome 6.0 中 都 可 以 正常 播放 音频 文件 ， 代 码 如 下 。 
<audio controls="controls"> 
<source src="music/1 .mp3"type="audio/mp3"> 
<source src="music/1.wav"type="audio/wav"> 
</audio> 
在 上 面 的 示例 代码 中 ,由 于 Firefox 4.0 不 支持 MP3 格式 的 音频 文件 ,因此 在 网 页 中 嵌入 音 
频 文 件 时 ， 还 需要 通过 source 元 素 指定 一 个 wav 格式 的 音频 文件 ， 使 其 能 够 在 Firefox 4.0 中 正 
常 播放 。 


用 CSS 控制 视频 的 宽 高 


在 HIML5 中 ， 经 常会 通过 为 video 元 素 添加 宽 高 的 方式 给 视频 预 留 一 定 的 空间 ， 这 样 浏 
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览 器 在 加 载 页 面 时 就 会 预先 确定 视频 的 尺寸 , 为 其 保留 合适 的 空间 , 使 页 面 的 布局 不 产生 变化 。 


接 下 来 本 节 将 对 视频 的 宽 高 属性 进行 讲解 。 
在 HTMLS5 页 面 上 ， 用 width 和 height 
【 例 11-3-1】 网 站 首页 了 


属性 设置 视频 的 宽度 和 高 度 。 


E 体 左 侧 局 部 页 面 设计 。 设 置 video 元 素 的 width 和 height 属性 ， 实 


现 视频 和 联系 方式 的 合理 布局 。 显 示 效果 如 图 11-5 所 示 ， 页 面 文件 11-3-1.html 的 代码 如 下 。 


<head> 
<meta charset="utf-8"> 
<style> 


main left{ * 定 义 主体 部 分 的 左 侧 块 的 样式 */ 


width:310px: 

height:410px: 
background-color:#44AAFF:; 
padding-left:20px; 

I3{ 
font-size: 16px:; 

Color: #545861; 
font-weight:500; 
margin-bottom:12px ; 

} 

‘main left video{ 
width:285px; 
height:200px; 

background-color#CCCCCC: 
border: lpx solid #BBBBBB: 

} 

.main left lianxi{ 
‘width:253px; 
height:125px; 
border:1px solid#fDDDDDD: 
border-radius:SpX: 
margin-top:15px: 
padding:0 15px: 

} 

</style> 

</head> 

<body> 
<div class="main left"> 
<h3>&nbsp: 产 品 展示 </h3> 


上 # 设 置 内 边 距 ， 


* 文 字 粗 细 为 500*/ 
放下 外 边 距 为 12px*/ 


证 内 容 宽 度 为 253px*/ 


上 下 0， 左右 各 15px*/ 


<video strc="dedia/led. mp4" autoplay="autoplay" loop="loop"></video> 


<div class="lianxi"> 联系 方式 </div> 
Adiv> 
<lbody> 


【说 明 】 在 图 11-5 中 ， 联 系 方式 的 盒子 宽度 为 253+15*2+1*2=285px， 和 video 元 素 的 宽度 
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相同 。 在 图 11-6 中 ， 未 定义 视频 的 宽度 和 高 度 ， 视 频 按 原始 大 小 显示 。 


图 11-5 设置 video 元 素 的 宽 高 图 11-6 不 设置 video 元 素 的 宽 高 


注意 : 
通过 width 和 height 属性 来 缩放 视频 ， 这 样 的 视频 在 页 面 上 看 起 来 虽然 很 小 ， 但 原始 大 小 
依然 没 变 ， 因 此 要 运用 相关 软件 对 视频 进行 压缩。 


视频 和 音频 的 方法 和 事件 


video 元 素 和 audio 元 素 相 关 ， 它 们 的 接口 方法 和 接口 事件 基本 相同 ， 本 节 将 对 video 元 素 
和 audio 元 素 的 方法 及 事件 进行 详解 。 


11.4.1 video 和 audio 元 素 的 方法 
HTMLS5 为 video 和 audio 元 素 提供 了 接口 方法 ， 有 具体 介绍 如 表 11-5 所 示 。 


表 11-5 video 和 audio 元 素 的 方法 

河 7 描 述 
加 载 媒体 文件 ， 为 播放 做 准备 。 通 常用 于 播放 前 的 预 加 载 ， 也 会 用 于 重新 
加 载 媒体 文件 
播放 媒体 文件 。 如 果 视 频 没有 加 载 ， 则 加 载 并 播放 ;如 果 视 频 暂停 ， 则 变 
为 播放 
暂停 播放 媒体 文件 


测试 浏览 器 是 否 支 持 指定 的 媒体 类 型 


11.4.2 video 和 audio 元 素 的 事件 
HTMLS5 还 为 video 和 audio 元 素 提供 了 一 系列 的 接口 事件 ， 有 具体 如 表 11-6 所 示 。 
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表 11-6 video 和 audio 元 素 的 事件 


束 汪 件 描述 
Play 当 执行 方法 play0 时 触发 
Playing 正在 播放 时 触发 
pause 当 执 行 方法 pauseO 时 触发 
timeupdata 当 播 放 位 置 被 改变 时 触发 
ended 当 播 放 结束 后 停止 播放 时 触发 
waiting 在 等 待 加 载 下 一 帧 时 触发 
Tatechange 在 当前 播放 速率 改变 时 触发 
Volumechange 在 音量 改变 时 触发 
canplay 以 当前 播放 速率 需要 缓冲 时 触发 
canplaythrough 以 当前 播放 速率 不 需要 缓冲 时 触发 
durationchange 当 播 放 时 长 改变 时 触发 
loadstart 在 浏览 器 开始 在 网 上 寻找 数据 时 触发 
Progress 当 浏 览 器 正在 获取 媒体 文件 时 触发 
Suspend 当 浏 览 器 暂停 获取 媒体 文件 ， 且 文件 获取 并 没有 正常 结束 时 触发 
abort 当 终 止 获取 媒体 数据 时 触发 ， 但 这 种 终止 不 是 由 错误 引起 的 
eIror 当 获 取 媒 体 过 程 中 出 错时 触发 
emptied 当 所 在 网 络 变 为 初始 化 状态 时 触发 
stalled 浏览 器 尝试 获取 媒体 数据 失败 时 触发 
loadedmetadata 在 加 载 完 媒体 元 数据 时 触发 
loadeddata 在 加 载 完 当前 位 置 的 媒体 时 触发 
seekin: 浏览 器 正在 请 求 数据 时 触发 
seeked 浏览 器 停止 请 求 数据 时 触发 


表 11-5 和 表 11-6 列举 了 video 和 audio 元 素 常 用 的 方法 和 事件 , 在 使 用 video 和 audio 元 素 
读 取 或 播放 媒体 文件 时 ， 会 触发 一 系列 的 事件 ， 但 这 些 事件 需要 用 JavaScript 脚本 来 捕获 ， 才 


可 以 进行 相应 的 处 理 。 


TT 实 训 


【 实 训 任务 】 设 计 音乐 视频 播放 页 面 。 本 例文 件 11-5html 在 浏览 器 中 的 显示 效果 如 图 11-7 


所 示 。 


【知识 要 点 】video 标签 及 其 属性 的 用 法 、audio 标签 及 其 属性 的 用 法 ， 用 width 和 height 属 
性 定义 video 元 素 的 宽 高 。 
【 实 训 目标 】 掌 握 在 HIML5 中 嵌入 视频 文件 和 音频 文件 的 方法 ， 以 及 用 CSS 控制 视频 宽 


高 的 技术 。 


282 


第 11 章 多 媒体 技术 


图 11-7 音乐 播放 页 面 


11.5.1 任务 分 析 


1. 页 面 结构 分 析 


将 音乐 视频 播放 界面 设计 为 打开 即 开始 播放 ， 页 面 的 设计 采用 DIV+CSS 进行 布局 。 歌 词 


在 页 面 右 侧 出 现 ， 自 下 而 上 滚动 显示 ， 效 果 如 图 11-8 所 示 。 
[ body 
video 
歌词 
andio( 不 显示 ) 


图 11-8 音乐 视频 播放 页 面 结构 图 


2. 样式 分 析 

(1) 将 “video” 设 计 为 宽度 和 高 度 均 为 100%， 不 显示 播放 控制 按钮 。 

(2) 将 “audio” 设 计 为 不 显示 播放 控制 按钮 ， 自 动 开始 播放 。 

(3) “歌词 ”相对 浏览 器 定位 ， 距 项 部 10px， 距 右 侧 Sopx。 另 外 ， 为 歌词 添加 透明 背景 。 


_ 283 


HTML5+CSS3 网 页 设计 基础 


11.5.2 ”任务 实现 


根据 上 面 的 分 析 ， 创 建 网 页 文件 和 样式 文件 ， 完 成 音乐 视频 播放 页 面 的 制作 ， 制 作 步 骤 
如 下 。 

(1) 启动 HBuilder， 在 当前 项 目 中 新 建 一 个 HIMLS 文档 ， 文 件 名 为 11-5.html。 

(2) 在 HBuilder 编辑 区 编辑 文件 ， 关 键 代码 如 下 ， 部 分 歌词 省 略 。 


<html> 
<head> 
<meta charset="utf-8"> 
<title> 音 乐 视频 播放 <ltitle> 
<style> 
Video{ 
width:100%; 
height:100%; 
} 
Pp{ 
height:100%:; 
font-size:12px; 
color #B8860B: 
colorfEEE 
position:absolute: 
top:0pX: 
Tight:50px; 
padding-left:15px: 
background-color:reba(255,255.255.0.1); 
} 
</style> 
</head> 
<body> 
<video src="media/hehua mp4" autoplay="autoplay"> 你 的 浏览 器 不 支持 video 标签 </video> 
<audio src="media/hetang.mp3" autoplay="autoplay"></audio> 
<p><marquee direction="up" loop="1" scrolldelay="1000" height="90%"> 
<h3> 荷 塘 月 色 - 凤凰 传奇 <h3> 
剪 一 段 时 光 缓 缓 流 消 <br> 
流 进 了 月 色 中 微微 荡 澜 ”<br> 
游 过 了 四 季 荷 花 依然 香 。 <br 
等 你 宛 在 水 中 央 ”<br> 
等 你 宛 在 水 中 央 ”<br> 
</marquee> 
<p> 
</body> 
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(3) 浏览 网 页 。 在 Chrome 浏览 器 中 浏览 网 页 ， 效 果 如 图 11-7 所 示 。 

【 实 训 说 明 】<marquee direction="up" loop="1" scrolldelay="1000">...</marquee> 代 码 段 实现 
标签 内 的 内 容 滚动 显示 效果 。 其 中 direction="up" 指 定 滚动 方向 向 上 ，loop="l1" 指 定 滚动 显示 一 
次 ，scrolldelay=-"1000" 指 定 滚动 显示 的 延 时 ， 将 参数 的 值 设 为 1000， 单 位 为 毫秒 (数值 越 大 ， 时 
间 间 隔 也 越 大 )。 


本 章 小 结 


本 章 首 先 介绍 了 HTMLS5 多 媒体 特性 、 多 媒体 的 格式 以 及 浏览 器 的 支持 情况 。 然 后 讲解 了 
在 HIMLS 页 面 中 嵌入 多 媒体 文件 的 方法 ， 并 简单 介绍 了 HTMLS5 音频 和 视频 元 素 的 方法 、 事 
件 。 最 后 运用 所 学 知识 制作 了 一 个 音乐 视频 播放 页 面 。 

通过 本 章 的 学 习 ， 读 者 应 该 了 解 HTMLS5 多 媒体 文件 的 特性 ， 熟 悉 常用 的 多 媒体 格式 ， 掌 
握 在 页 面 中 嵌入 音 视 频 文件 的 方法 ， 并 将 其 综合 运用 到 页 面 的 制作 中 。 


练习 题 


1. 设计 如 图 11-9 所 示 的 页 面 。 在 光盘 背景 上 显示 音频 控件 ， 单 击 播放 按钮 开始 播放 音乐 。 


多 D 音乐 CD 
GC © file/WEVAladLed_excise/chapter11..， 食 


De 
图 11-9 练习 题 1 效果 图 
2. 设计 如 图 11-10 所 示 的 页 面 。 
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口 ar "x 


© © 127.0018020/Aladled exwise/chapter11/xt11-2html?_hbt=1556417311130 


图 11-10 ”练习 题 2 效果 图 


286 


第 12 章 
网 页 设计 基础 


网 站 前 台 页 面 是 用 户 浏览 信息 的 平台 ， 是 展示 企业 形象 和 文化 的 重要 窗口 。 网 站 设计 中 要 
考虑 网 页 内 容 的 显示 、 整 体 颜色 搭配 、 页 面 的 排版 布局 等 。 本 章 主 要 应 用 前 面 章节 讲解 的 网 页 
设计 技术 ， 引 导读 者 设计 制作 爱 德 照 明 网 站 的 前 台 页 面 ， 从 而 进一步 巩固 网 页 设计 与 制作 的 知 
识 和 技术 。 


本 章 的 学 习 目标 : 

。 了解 网 站 的 开发 流程 。 

掌握 网 站 开发 中 需求 分 析 的 方法 。 

了 解 站 点 规划 的 内 容 和 要 求 。 

掌握 用 HBuilder 建立 站 点 、 设 计 网 页 的 技术 ， 能 够 建立 规范 的 站 点 。 


区 到 网 站 的 开发 流程 


为 了 提高 网 站 建设 的 效率 ， 需 要 通过 科学 合理 的 开发 流程 来 进行 网 站 的 策划 、 设 计 、 制 作 
和 发 布 。 典 型 的 网 站 开发 流程 包括 以 下 几 个 阶段 。 

(1) 需求 分 析 

根据 用 户 的 需求 、 企 业 资本 以 及 行业 网 站 的 动态 ， 确 定 建站 的 目的 及 目标 定位 。 

(2) 站 点 规划 

确定 好 项 目 后 ， 开 始 着 手 进行 网 站 的 规划 ， 包 括 结构 规划 、 内 容 规 划 、 界 面 规划 以 及 网 站 
功能 设置 等 。 

(3) 网 站 制作 

站 点 规划 完毕 后 就 可 以 开始 网 站 制作 ， 包 括 设置 网 站 的 开发 环境 、 准 备 网 站 内 容 、 进 行 页 
面 布局 设计 和 制作 等 。 

(4) 测试 发 布 

根据 前 期 规划 对 项 目 进行 测试 和 检验 ， 包 括 测试 页 面 的 链接 和 网 站 的 兼容 性 ， 然 后 将 站 点 
发 布 到 网 站 上 。 
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12.1.1 需求 分 析 


1. 建站 目的 


在 互联 网 时 代 ， 网 站 作为 企业 的 第 二 种 战略 方向 ， 能 帮助 企业 提供 更 广 的 服务 渠道 ， 接 触 
更 多 的 用 户 。 建 立 网 站 的 目的 要 么 是 增加 利润 ， 要 么 是 传播 信息 或 观点 。 爱 德 照明 网 站 的 创建 
的 目的 是 让 更 多 的 用 户 了 解 自己 的 产品 ， 提 高 公司 的 知名 度 ， 帮 助 企业 提供 更 广 的 服务 渠道 ， 
形成 一 定 规模 的 产品 市 场 。 


2. 目标 定位 


对 设计 者 来 说 ， 网 站 一 定 要 有 特定 的 用 户 和 任务 。 不 同 的 用 户 对 站 点 的 要 求 不 同 ， 所 以 确 
定 目标 用 户 是 一 个 至 关 重 要 的 步骤 。 爱 德 照明 网 站 主要 面向 城乡 建设 、 单 位 环境 美化 和 家 庭 装 
修 等 方面 的 用 户 ， 把 产品 优势 呈现 给 浏览 者 ， 引 起 他 们 的 注意 是 最 终 目 的 。 针 对 这 一 特点 ， 爱 
德 照明 网 站 应 多 展示 产品 和 案例 ， 方 便 客 户 查找 信息 。 


12.1.2 ”站 点 规划 
对 开发 的 网 站 从 结构 、 内 容 、 界 面 和 功能 设置 等 方面 进行 规划 设计 。 
1. 网 站 结构 规划 


(1) 画 出 网 站 结构 图 

在 设计 网 站 之 前 ， 需 要 先 画 出 网 站 结构 图 ， 其 中 包括 网 站 栏目 、 结 构 层 次 和 导航 设置 等 。 
首页 中 的 各 功能 按钮 、 内 容 要 点 、 友 情 链 接 等 都 要 体现 出 来 ， 内 容 要 周全 并 突出 重点 。 布 局 设 
计时 ， 在 首页 上 把 大 段 的 文字 换 成 标题 性 的 、 吸 引 人 的 文字 ， 单 项 内 容 在 分 支 页 面 上 呈现 。 

(2) 文件 夹 设计 

为 了 有 效 地 规划 和 组 织 站 点 ， 需 要 规划 站 点 的 基本 结构 和 文件 的 位 置 ， 可 以 通过 创建 文件 
夹 来 合理 地 构建 文档 结构 。 首 先 为 站 点 (项 目 ) 创 建 一 个 根 文件 夹 ， 在 其 中 创建 多 个 子 文件 夹 ， 
然后 将 文档 分 门 别 类 存储 到 相应 的 文件 夹 下 。 如 果 有 必要 ， 还 可 创建 多 级 子 文件 来， 这 样 可 以 
方便 文档 的 管理 和 使 用 。 设 计 合 理 的 站 点 结构 ， 能 够 提高 工作 效率 ， 方 便 对 站 点 的 管理 。 

文档 中 不 仅 有 文字 ， 还 有 其 他 各 种 类 型 的 资源 ， 如 图 像 、 声 音 和 视频 等 ， 这 些 资源 不 能 直 
接 存 储 在 HIML 文档 中 ， 所 以 也 要 创建 文件 夹 来 分 类 存放 。 

(3) 文件 命名 要 求 

当 网 站 的 规模 变 得 很 大 时 ， 使 用 合理 的 文件 名 就 显得 十 分 必要 ， 文 件 名 要 求 见 名 知 意 ， 容 
易 理解 且 便 于 记忆 ， 让 人 看 见 文件 名 就 能 知道 网 页 表述 的 内 容 。 但 注意 在 网 页 设计 中 要 避免 使 
用 中 文 ， 因 为 很 多 Web 服务 器 使 用 的 是 英文 操作 系统 ， 不 能 对 中 文 文件 名 提供 很 好 的 支持 。 另 
外 ， 很 多 Web 服务 器 采用 不 同 的 操作 系统 ， 有 可 能 区 分 文件 名 的 大 小 写 ， 所 以 在 构建 站 点 时 ， 
要 使 用 英文 字母 和 数字 来 命名 文件 夹 和 文件 名 。 


2. 网 站 内 容 规划 
网 站 内 容 分 为 重点 内 容 、 主要 内 容 和 辅助 性 内 容 , 这 些 内 容 在 网 站 中 具有 各 自 的 体现 形式 。 
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内 容 划 分 好 以 后 ， 还 需要 把 内 容 包 装 成 栏目 。 爱 德 照明 网 站 的 主 栏目 有 产品 中 心 、 工 程 案例 、 
新 闻 动态 、 招 商 加 盟 、 关 于 我 们 和 联系 方式 等 ， 在 每 个 主 栏目 下 还 设 有 多 个 下 级 子 栏目 。 


3. 网 站 界面 规划 


gir 如 网 站 色彩 包括 主 色 、 辅 色 和 突出 色 , 版 式 设计 包括 全 局 、 
导航 、 核 心 区 、 内 容 区 、 广 告 区 、 版 权 区 及 版 块 设计 等 。 


4. 网 站 功能 设置 

爱 德 照明 网 站 前 台 页 面 的 主要 功能 包括 : 产品 展示 、 工 程 案例 展示 、 企 业 新 闻 、 产 品 资讯 、 
招商 加 盟 信息 和 联系 方式 等 。 另 外 ， 还 有 管理 员 登 录 页 面 、 用 户 注册 页 面 等 。 

爱 德 照明 网 站 后 台 页 面 的 主要 功能 是 实现 网 站 内 容 的 管理 ， 包 括 栏目 管理 、 产 品 管理 、 工 
程 案例 管理 、 各 种 新 闻 资讯 管理 、 用 户 管理 和 系统 设置 等 。 

由 于 篇 幅 所 限 ， 本 书 只 介绍 爱 德 照明 网 站 前 台 的 首页 、 新 闻 动 态 -公司 新 闻 、 联 系 方式 等 页 
面 的 设计 。 
12.1.3 ”网 站 制作 

完整 的 网 站 制作 包括 以 下 两 个 过 程 。 

1. 前 台 页 面 制作 

前 台 页 面 制作 包括 内 容 收 集 整理 、 图 片 的 处 理 、 背 景 设置 、 页 面 布局 排版 及 样式 设计 等 。 
. 后 台 程 序 开发 

后 台 程 序 开发 包括 数据 库 设计 、 网 站 和 数据 库 的 连接 、 动 态 网 页 编程 等 。 

本 书 主要 讲解 前 台 页 面 的 制作 ， 关 于 后 台 程序 开发 的 相关 知识 读者 可 以 在 动态 网 站 设计 的 
课程 中 学 习 。 
12.1.4 测试 发 布 

在 把 站 点 发 布 到 服务 器 之 前 ， 需 要 对 网 页 内 容 和 网 站 整体 性 能 进行 有 效 测试 。 

1. 测试 站 点 

网 站 测试 与 传统 的 软件 测试 不 同 ， 不 但 需要 检查 是 否 按照 设计 的 要 求 运行 ， 而 且 还 到 测 斌 
系统 在 不 同 用 户 端的 显示 是 否 合适 ， 需 要 从 最 终 用 户 的 角度 进行 安全 性 和 可 用 性 测试 。 测 试 内 
容 包括 页 面 是 否 美观 、 链接 是 否 正确 和 浏览 器 兼容 性 是 否 良好 等 。 

2. 发 布 站 点 


当 完 成 网 站 的 设计 、 调 试 、 测 试 和 网 页 制作 等 工作 后 ， 需 要 把 设计 好 的 站 点 上 传 到 服务 器 ， 
从 而 完成 整个 网 站 的 发 布 。 


DD 
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用 HBulider 创建 Web 项 目 


熟悉 了 网 站 的 开发 流程 后 ， 就 可 以 开始 制作 网 页 了 。 

启动 HBuilder, 创建 Web 项 目 。 依 次 单 击 “ 文 件 ” 一“ 新建” 一 “选择 Web 项 目 ”命令 ， 
弹出 “创建 Web 项 目 ” 对 话 框 ， 在 “项 目 名 称 ”后 的 文本 框 中 输入 Web 项 目的 名 称 AladLed， 
单 击 “ 浏 览 ” 按钮 ， 选 择 文件 的 存放 路 径 ， 如 图 12-1 所 示 。 最 后 单 击 “ 完 成 ”按钮 , 在 HBuilder 


[ pe | 
加 wm 扶 从 项目 只 包 言 Index html 文 件 | 项 目 管理 器 3 | | 
加 Helle HBuilder 该 页 有 可 以 让 你 块 速 了 解 HBuilder , 试 一 下 吧 s 回 =| 
wana 重信 WEB App， 使 用 此 模板 支持 尖 信 /S$-SDK8 的 提示 模板 Aded -| 


加 index.html 
» @ HelloHBuilder 


图 12-1 “创建 Web 项 目 ” 对 话 框 图 12-2 项 目 管理 器 


从 图 12-2 可 以 看 出 ， 在 创建 的 Web 项 目 中 有 默认 创建 的 文件 来， 这 方便 了 站 点 资源 的 管 
理 。 网 站 的 CSS 样式 表 文件 要 创建 在 css 文件 夹 中 。JS 脚本 文件 要 创建 在 js 文件 夹 中 ,各 种 图 
片 资料 要 放置 到 img 文件 夹 中 。 另 外 ， 在 AladLed 项 目的 根 文件 夹 下 ， 要 创建 media 文件 夹 ， 
用 来 放置 网 站 需要 的 音频 和 视频 等 媒体 文件 。index.html 是 自动 生成 的 文件 ， 一 般 是 网 站 默认 
的 首页 文件 。 


案例 : 制作 爱 德 照明 网 站 首页 


【案例 展示 】 制 作爱 德 照明 网 站 首页 。 本 例文 件 index html 在 浏览 器 中 的 显示 效果 如 图 12-3 
所 示 ， 页 面 结构 如 图 12-4 所 示 。 

【知识 要 点 】 页 面 布局 、 文 本 、 图 像 、 列 表 、 超 链接 、 导 航 、CSS3 动画 和 多 媒体 。 

【学 习 目标 】 掌 握 综合 应 用 页 面 元 素 、 布 局 技术 和 CSS 样式 等 设计 网 页 的 技术 。 
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le Sa 
照明 材料 J Be, sua Yee hoador-right 
header a 员 aa 
[header-tert | online zx 
Content 
hotproduet 
| im Itext| | ing text| img | |text ing | texl| 
main 
main left main center || main right 
h3 | more|| nh3 ore] 
video | ul i imgbox 
lianxi ul 1i 
footer 
图 12-3” 爱 德 照明 网 站 首页 的 显示 效果 图 12-4 ” 爱 德 照明 网 站 首页 的 布局 结构 


爱 德 照明 网 站 首页 的 制作 过 程 如 下 。 
1. 页 面 整体 布局 设计 


网 站 首页 上 包括 logo、 各 种 导航 链接 、 热 销 产品 列表 、 产 品 展示 视频 、 企 业 新 闻 列 表 、 客 


户 案例 列表 、 联 系 方式 、 页 脚 的 链接 和 地 址 信息 等 ， 主 体 部 分 是 三 列 布局 ， 页 面 布局 规划 如 图 
12-4 所 示 。 


2. 网 页 结构 文件 


首页 index.html 的 页 面 代码 如 下 。 
<!IDOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<link hre 人 ="CSS/stylel.css" rel="stylesheet" type="text/css"> 
<title> 爱 德 照明 网 站 首页 </title> 
</head> 
<body> 
<header> 
<img class="header-left" src="img/logo.pne" > 
<div class="header-right"> 
<a hre 人 ="#'><img src="img/wechatl.png" 户 官方 微 信 </a>&nbsp:<span style="color:#930">|</span> 
<a href="login html" target=" blank"> 管 理 员 登 录 </a>&nbsp:<span style="color#930">|</span> 
<a hre 人 ="register.html" target=”blank"> 会 员 注册 </a> 
<div> 
<div class="header-text"> 照 明 材料 </div> 
</header> 
<nav> 
<uP 
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<li><a hre 仁 "index.html"> 首 页 </a></li> 
<li><a hre 仁 "productshtml" > 产品 中 心 </a></li> 
<li><a hre 仁 "works.html"> 工 程 案 例 </a></li> 
<li><a hre 仁 "news.html"> 新 闻 动 态 </a></li> 
-<li><a href"join html"> 招 商 加 盟 </a></li> 
<li><a hre 仁 "about.html"> 关 于 我 们 </a></li> 
<li><a hre 全 "contacthtml"> 联 系 方式 </a></li> 
<l> 
</nav> 
<div id="content"> 
<div id="hotproduct"> 
< 
<I> 
<img class="zheng" src="img/led sdl.jpg"> 
<img class="fan"src="img/led sd2jpg"> 
<> 
<liclass="evenlist"> 
<strong>LED 射 灯 </strong> 
专业 技术 <br> 
高 效 耐用 <br> 
<ahre 人 "led sd_detailshtml"> 详 细 信息 </a> 
</> 
<li> 
<img class="zheng" src="img/led jgd7.jpg"> 
<img class="fan"src="imglled jgd6.jpg"> 
</> 
<li class="evenlist"> 
<strong>LED 景观 路 灯 </strong> 
优越 品质 <br> 
绿色 环保 <br> 
<ahre 人 "led_ sd_details html"> 详 细 信息 </a> 
</> 
<I> 
<img class="zheng" src="img/led_nhdl.jpe"> 
<img class="fan"src="img/led ngd2.jpg"> 
</I> 
<li class="evenlist"> 
<strong>LED 霓虹灯 </strong> 
领先 科技 <br> 
节能 高 效 <br> 
<ahref-"led_sd_details html"> 详 细 信息 </a> 
</> 
<li> 
<img class= "zheng" src="img/led wildl.jipg"> 
<img class="fan"src="img/led_ wld3.jpg"> 
<> 
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<li class="]astlist"> 
<strong>LED 瓦楞 灯 </strong> 
优越 品质 <br> 
优质 体验 <br> 
<a hre 人 "led_sd_details.html"> 详 细 信 息 </a> 
< 人 > 
< 
</div> 
<div id="main"> 
<div class="main left"> 
<h3>&nbsp: 产 品 展示 </h3> 
<video src="media/led mp4" autoplay="autoplay" loop="loop" controls="controls"></video> 
<div class="lianxi"> 
<p><img sre="img/telephone jpg">0633-3981234<br/>400-180-6789</p> 
<p><img src="img/envelopejpg"> 地 址 :山东 省 日 照 市 学 苑 路 <br> 科 技工 业 园 A 区 16 号 <p> 
</div> 
</div> 
<div class="main_center"> 
<h3> 企 业 新 闻 </h3> <a href="news.htmil" target="_blank" class="more">MORE&raquo:</a> 
<ul> 
<li><a hre 仁 "news_detailshtml"> 因 应 智慧 汽车 概念 ，ADB 智能 LED 头 灯 系 统 发 展 迅速 ，ADB 
智能 LED 头 灯 兴 起 </a></li> 
<span class="date">2018-03-30</span> 
<li><a hre 伍 "> LED 灯 具 国 内 业务 市 场 研讨 会 LED 灯 具 国 内 业务 2017-4-6</a></li> <span class 
="date">2018-03-03</span> 
<li><ahre 全 "> 车 用 、MiniLED 等 新 产品 助力 ， 亿 光 & 荣 创 看 好 营运 服务 工作 .</a></li> 
<span class="date">2018-03-03</span> 
<l><ahre 人 "> OLED 照明 市 场 的 机 会 与 挑战 -- LEDinside</a></li> <span class="date"> 
2018-03-03</span> 
<li><a hre 仁 "> 江苏 加 快 半导体 照明 产业 发 展 ，2020 年 规模 将 达 1200 亿 .</a></li> <span class= 
"date">2018-03-03</span> 
<li><a hre 伍 "> 智能 照明 进入 高 速 发 展 ， 工 业 及 商业 为 最 大 应 用 场景 .</a></li> <span class= 
"date">2018-03-03</span> 
<hl> 
</div> 
<div class="main right"> 
<h3> 客 户 案例 </h3> <a hre 全 "works html" target="_blank" class="more">MORE&raquo:</a> 
<div class="imgbox"> 
<img stc="img/led jgd9.jpe" /> 
<hgroup> 
<h3> 日 照 水 运 基地 </h3> 
<h3> 日 照 奥林匹克 水 上 公园 <h3> 
<h3> 日 照 水 上 运动 中 心 夜景 亮 化 <h3> 
<hgroup> 
</div> 
<u> 
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<li><ahre 人 "> 乌 海 政府 亮 化 工程 -2016 年 7 月 完工 ， 美 丽 的 城市 </a></li> 
<li><a hre 全 "> 夜景 亮 化 工程 公司 -美丽 一 座 城市 的 夜晚 </a></li> 

<l><a hre 仁 "> 小 区 数码 管 亮 化 工程 -方便 大 家 出 行 </a></li> 

<li><a hre 仁 "> 水 世界 楼 体 亮 化 -旅游 盛 景 ， 等 你 欣赏 美景 </a></li> 

<li><ahre 全 "> 开发 区 委 会 夜景 亮 化 -2018 年 3 月 完工 </a></li> 


</div> 
<footer> 
<p class="link"> 
<a href="index.html"> 网 站 首页 </a>|<a href="productshtml"> 产 品 中 心 </a>|<a hre 人 "contacthtml"> 联 
系 方式 </a>|ka hre 人 "newshtml"> 新 闻 动 态 </a> 


p> 
<p> 地 址 : 山东 省 日 照 市 学 苑 路 爱 德 照明 科技 有 限 公司 </p> 
</footer> 
<div class="online zx"><a href="#"><img strc="img/contact.pne"></a></div> 
</body> 
</html> 


3. 外 部 样式 表 文 件 

在 css 文件 夹 中 新 建 样式 表 文件 stylel.css， 代 码 如 下 。 

(1) 页 面 整体 布局 样式 

全 局 样式 包括 页 面 的 body、 超 链接 a、 服 务 器 字体 和 各 级 标题 的 CSS 样式 定义 。 


@charset "utf-8"; 
A /# 针 对 所 有 的 HTML 元 素 定义 样式 */ 
margin:0; 刻 外 边 距 为 Opx*/ 
padding:0; 启 内 边 距 为 Opx*/ 
box-sizing:border-box: 人 # 盒 子 的 宽度 值 和 高 度 值 包含 元 素 的 内 边 距 和 边框 / 
8 
af 片 设置 超 链接 的 样式 */ 
text-decoration: none: 人 无 修饰 9/ 
@font-face { 店 定 义 服务 器 字体 */ 
font-family:iconfont: 刻 定 义 服务 器 字体 名 称 */ 
src-url(../fonts/iconfont.ttf): 证 定义 服务 器 字体 文件 路 径 */ 
} 
body{ 让 设置 页 面 整 体 样式 */ 
width:1050px: 上 # 宽 度 为 1050px*/ 
margin:0 auto- 页面 自动 居中 对 齐 术 
font-family:" 微 软 雅 黑 ": 证 字体 为 "微软 雅 黑 "*/ 
font-size:13px: 语文 字 大 小 为 13px*/ 
Color:#333; 语文 字 颜 色 为 灰色 */ 
position:relative 上 相对 定位 4/ 
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} 


3{ /*h3 标题 的 样式 */ 
font-size:16px: 
color:#545861: 证 文字 颜色 为 浅 灰色 */ 
font-weight:500; 上 证 文字 粗细 为 500*/ 

有 

h4{ /*h4 标题 的 样式 */ 
font-size:14px: 证 文字 大 小 为 14px*/ 

} 

hs{ /*h5 标题 的 样式 */ 
font-size:13px; 必 文 字 大 小 为 13px*/ 


} 


(2) 页 面 项 部 的 样式 
页 面 顶部 header 中 包括 logo、 官 方 微 信 、 管 理 员 登录 、 用 户 注册 、 网 站 名 称 等 样式 以 及 背 
景 定义 。 


证 网 页 头 部 的 CSS 样式 开始 */ 
header { 
height:250px: /# 高 度 为 250px*/ 
background-color#FFFFEE : 让 背景 颜色 */ 
background-image-url(../img/banner.jpg);  /* 背 景 图 片 */ 
background-repeat:no-repeat: 记 背 景 图 片 不 平 铺 */ 
background-position:center SOpx; 人 # 背 景 图 片 的 位 置 ， 左 右 居 中 ， 离 顶部 50px*/ 
‘header-left{ 
height:50px: 证 高 为 50px*/ 
} 
header-right{ 
width:250px: 
height:SOpx: 
line-height:50px: 雍 行 高 为 50px*/ 
float:right: 证 向 右 浮动 */ 
} 
‘header-right img{ 
width:25px: 
height:21px: 
} 
‘header-right a:link, header-right a:visited{ 上 # 普 通 链接 和 访问 过 的 链接 的 样式 #/ 
text-decoration:none: 证 文本 无 修饰 */ 
color:#111111: 
} 
‘header-right a:active,.header-right a:hover{ /# 激 活 链接 和 悬 停 链接 的 样式 s/ 
colorblue: 
} 
‘header-text{ 刻 文 字样 式 */ 


295 


HTML5+CSS3 网 页 设计 基础 


font-size:40px: 
color: #4F ACO0: 
margin-top: 10px: 
margin-left:150px: 


} 
让 网 页 头 部 的 CSS 样式 结束 */ 


(3) 主导 航 样式 的 定义 


页 面 导航 nav 中 ， 用 无 序列 表 定义 导航 项 目 。 需 要 定义 Wl、li、 超 链接 a 及 背景 样式 。 


片 导航 栏 样式 开始 */ 
nav{ 证 定义 重复 渐变 的 背景 +/ 
margin-bottom: Spx; 
height:36px: 
background-image:linear-gradient(0deg.#9cf#fff 60%.#9cf 100%): 
border-bottom: 1px solid #DBEAEE: 
border-top: 1px solid #DBEAEE: 
} 
navul { 店 设 置 菜 单列 表 的 样式 */ 
list-style-type:none; 证 不 显示 项 目 符号 */ 
} 
navulli{ 人 # 设 置 菜单 列表 项 的 样式 六 
display:inline: 证 内 联 元 素 */ 
line-height:36px; 刻 行 高 为 36px*/ 
} 
navullia{ 
display:block: 片 块 级 元 素 */ 
Width:90px: 
height:36px: 
float: left: 证 向 左 浮动 */ 
padding:0px 8px 0px 8px: ”人 上 、 右 、 下 、 左 内 边 距 依次 为 0px、8px、0px、8px*/ 
margin:0 10px 0 20px: 上 # 上 、 右 、 下 、 左 外 边 距 依次 为 Opx、10px、0px、20px*/ 
text-decoration:none: /# 链 接 无 修饰 所 
text-align:center: 证 文字 居中 对 齐 */ 
font-family:tahoma; 
font-size:14px: 
font-weight:bold: 证 字体 加 粗 */ 
} 
nav ul linth-child(1)a{ 片 设置 第 一 个 导航 菜单 项 “首页 ”的 宽度 为 50px*/ 
width: 50px: 
} 
nav ullia:link, nav ullia:visited { ”人 * 定 义 普通 链接 、 访 问 过 的 链接 的 样式 */ 
Color:#333; /* 浅 黑色 文字 ?/ 


} 


nav ul li a:active.nav ul li a:hover { 


Color-#FFF:; 
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background-image:linear-egradient(0deg.#36c.#9CF 60%.#ffF 100%): 


上 导航 栏 样式 结束 六 


(4) 页 面 中 部 样式 的 定义 


页 面 中 部 内 容 在 id="content" 的 div 盒子 中 ， 包 括 热 销 产品 列表 、 三 列 布局 内 容 的 样式 定义 。 
Q 页 面 中 部 盒子 的 样式 ， 定 义 盒子 宽度 ， 高 度 自 适应 。 


证 网 页 中 部 内 容 样式 开始 */ 

#content{ 让 页 面 中 部 盒子 的 样式 */ 
width:1050px: 
heightauto: 片 自动 默 认 高 度 */ 


} 


@ 热 销 产品 列表 的 样式 ， 包 括 世 、fi、img、a 和 3D 动画 的 样式 。 


上 首页 中 部 - 热 销 产品 样式 开始 */ 

#hotproduct{ 
height:auto; 

} 

#hotproduct ul{ 
list-style: none; 
width:1050px; 
height:158px: 
padding:6px 0 Opx 4px: 
border:2px solid #DDDDDD:; 

} 

#hotproduct ul li{ 
width:160px: 
display:inline-block: 
float:left: 
margin-right:10px: 
margin-bottom: 1px: 
Pposition:relative: 
-Webkit-perspective:250pX: 

} 

#hotproduct ul li.evenlist { 
‘Width:80px: 
height:148px: 
border-right: 1px solid #ddd: 
有 

#hotproduct ul lilastlist{ 
width:80px: 
height: 148px: 
border-right:Opx; 
bb 

#hotproduct ul li img{ 
width:160px: 


店 设 置 热 销 产品 列表 的 样式 */ 
让 不 显示 项 目 符号 */ 


让 上 、 右 、 下 、 左 内 边 距 依次 为 6px、0px、0px、4px*/ 
上 # 热 销 产品 区 的 边框 为 2px 的 灰色 实 线 */ 

店 设 置 热 销 产品 列表 项 的 样式 */ 

片 内 联 元 素 */ 

庆 向 左 浮动 */ 

片 右 外 边 距 为 10px*/ 

让 下 外 边 距 为 1px*/ 

记 相 对 定位 */ 

人 # 透 视 效 果 : 子 元 素 与 镜头 之 间 的 距离 为 250px*/ 


让 设置 热 销 产品 列表 项 中 偶数 项 的 样式 */ 


上 # 右 边框 为 1px 的 灰色 实 线 */ 


广 设 置 热 销 产品 列表 项 中 最 后 一 项 的 样式 */ 


刻 不 设置 右边 框 */ 


人 # 设 置 热 销 产品 列表 项 中 图 像 的 样式 %/ 
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height: 141px: 

position: absolute; 此 绝对 定位 */ 

left:0: 上 # 离 左 侧 0px*/ 
top:0: 上 # 离 顶部 0px*/ 
-webkit-backface-visibility-hidden: 广元 素 背 面 不 可 见 */ 
transition:all 0.5s ease-in 0s: /#0.5 秒 完成 动画 */ 

} 

#hotproduct ul li img fan{ 片 设置 图 片 的 样式 */ 
-webkit-transform:rotateX(-180deg): 片 图 像 沿 义 轴 3D 旋转 -180”*/ 

} 
#hotproduct ul lihover img fan{ 片 设置 鼠标 上 其 停 在 图 片上 时 的 样式 */ 
-webkit-transform:rotateX(0deg); 上 # 图 像 沿 和 X 轴 3D 旋转 0” */ 
} 
#hotproduct ul li:hover img.zheng{ 
-webkit-transfonm:rotateX(180deg): 
} 

#hotproduct strong{ 族 定 义 strong 样式 */ 
display: block: 证 块 级 元 素 */ 
margin:10px 0 0 0: 上 # 上 、 右 、 下 、 左 内 边 距 依次 为 10px、0px、0px、0px*/ 

} 

#hotproduct a{ 让 设置 热 销 产品 区 中 超 链接 的 样式 */ 
display:inline-block:; 
width:75px; 
height:26px: 
background-color:#494949; 

Color:#FFF ; 
text-decoration: none': 
text-align:center; 
margin-top:15px; 
line-height:26px : 

} 

#hotproduct a:after { 片 在 超 链接 后 插入 内 容 */ 
content: url(../img/triangle-icon-white. png): 证 插入 图 片 */ 
padding-left: Spx: /# 左 内 边 距 为 5px*/ 

} 
证 首页 中 部 - 热 销 产品 样式 结束 */ 


@ 中 部 -主体 部 分 样式 ， 三 列 布局 设计 ， 包 括 产品 展示 视频 、 企 业 新 闻 列表 
联系 方式 、 超 链接 more 和 2D 动画 的 样式 定义 。 
证 首页 中 部 -主体 部 分 样式 开始 */ 
#main{ 
clear:both: 证 清除 两 侧 浮动 */ 


上 
从 定义 主体 部 分 的 左 、 中 、 右 三 块 所 
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jnain main left#main main center#main main right{ 
padding:0px 20px: 谍 上 下 内 边 距 为 0px， 左 右 内 边 距 为 20px*/ 
margin-top:20px : 片上 外 边 距 为 20px*/ 
position:relative: 让 相 对 定位 */ 

} 

#main h3{ 
margin_bottom:12px : 大 下 外 边 距 为 12px*/ 


} 
店主 体 左 侧 样式 开始 */ 
#main main left{ 
width:307px: 
padding-left: Opx: 人 # 左 内 边 距 为 0px*/ 
float: lef 
3 
#main .main left video{ 证 视频 的 样式 */ 
width:285px: 
height:200px: 
background-color#CCCCCC: 
border: 1px solid #BBBBBB: 


} 
首页 联系 方式 盒子 样式 开始 */ 
main main left .lianxi{ 
width:285px; 
height: auto; 
border: 1px solid #DDDDDD:; 
border-radius: Spx; 
margin-top:15px; 
padding:0 15px; 
} 
#main main left .lianxi p{ 
font-size:13px: 
height:S0px: 
line-height:20px; 
margin-top:8px: 
} 
#main .main left lianxi img{ 
width:43px: 
height:43px; 
float:left: 
margin-right:15px : 
中 
证 首页 联系 方式 盒子 样式 结束 */ 
证 主 体 左 侧 样式 结束 */ 
片 主体 中 部 样式 开始 -企业 新 闻 样 式 */ 
#main .main_center{ 
width:390px: 
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border-left:3px solid #DDD : /# 左 边框 为 3px 的 浅 灰 色 实 线 */ 
border-right:3px solid #DDD : 片 右 边框 为 3px 的 浅 灰 色 实 线 */ 
margin-bottom:10px: 刻下 外 边 距 为 10px*/ 
float:left: 
} 
#main .main_center ul li{ 刻 列 表 项 的 样式 */ 
border-top: 1px dotted #999999: 广 上 边框 为 1px 的 灰色 点 线 */ 
padding:Spx Opx: 上 # 上 、 右 、 下 、 左 内 边 距 依次 为 Spx、0px、5px、0px*/ 
White-space:nowrap: /# 强 制 文本 不 能 换行 3 
overflow:hidden: 证 隐藏 溢出 文本 */ 
text-overflow:ellipsis: /# 滋 出 文本 被 修剪 ， 显 示 省 略 号 #/ 
line-height:19px: 上 # 行 高 为 19px*/ 
让 在 列表 项 内 容 前 插入 三 角 图 标 */ 
#main .main center ul li:before{ 
content:url(./img/triangle-icon-blue.jpe): 
padding-right:4px: 
} 
jnain .main center .date{ 
Color:#999999; 
display:block: 刻 块 级 元 素 */ 
margin:0 0 10px 10px: 上 # 上 、 右 、 下 、 左 外 边 距 依次 为 Opx、0px、10px、10px*/ 
上 主体 中 部 样式 结束 */ 
上 主体 右 侧 样 式 开始 */ 
#main main right{ 
width:350px: 
padding-right:0px : 人 # 右 内 边 距 为 Opx*/ 
float:right; 
} 
#main main Tight imgbox{ 让 客户 案例 的 盒子 样式 */ 
Width:325px; 
height:200px: 
position:relative: 
overflow:hidden: 


} 

#main .main Tight imgbox img{ 让 客户 案例 的 图 片 样式 */ 
width:325px: 
height:200px: 

} 

fnain main Tight imgbox hgroup{ 。 上 # 客 户 案例 的 盒子 中 的 文本 样式 六 
padding-top:20px: 
text-alien:center: 
position:absolute: 
left:0: 
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top:-200px: 
width:325px: 
height:200px; 
background:rgba(0,0.0.0.5): 
transition:all 0.5s ease-in Os: 族 过 渡 效 果 */ 
} 
#main .main right imgbox hgroup h3{ 
color:#BBB; 
} 
##main main right imgbox:hover heroup{ ”鼠标 指向 时 ， 文 本 位 置 ( 下 滑 )*/ 
position:absolute; 
left:0; 
top:0; 
} 
main main right ulli{ 


line-height:27px: /# 行 高 为 27px/ 
margin-left:20px; 族 左 内 边 距 为 20px*/ 
> 

证 主体 部 分 无 序列 表 中 超 链 接 样 式 定义 开始 */ 

加 nain ul a:link.a:visited{ 片 超 链 接 和 访问 过 的 超 链接 的 样式 */ 
text-decoration:none: /文本 无 修饰 
Color:#333333; 

) 

#main ul a:hover{ 
color:red:; 
text-decoration:underline; 让 加 下 夯 线 */ 

! 

目 主 体 部 分 无 序列 表 中 超 链接 样式 定义 结束 */ 

#main .more 证 定义 超 链接 more 的 样式 */ 

{ 
position:absolute: 刻 绝 对 定位 */ 
top:10px: /# 距 顶部 10px*/ 
Tight:10px: 人 # 离 右边 10px*/ 
text-decoration: none: 上 放 无 修饰 */ 
color#0091D8: 

有 

证 首 页 中 部 -主体 部 分 样式 结束 */ 


(5) 页 面 底部 区 域 的 制作 
页 面 底部 footer 中 ， 包 括 超 链接 、 地 址 信息 和 背景 的 样式 定义 。 
语 footer 样式 开始 */ 
footer{ 
clear:both: 证 清除 两 侧 浮动 */ 
height:100px: 
backeround:#545861:; 
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border-bottom: 1px solid #EE 上 # 下 边框 为 1px 的 白色 实 线 */ 


color: #fPPPFF 证 白色 文字 */ 
text-align:center: 证 文 字 水 平 居中 */ 

9 

footer link{ 
padding-top:25px : 谍 上 内 边 距 为 25px*/ 

上 

footer link a{ 
display:inline-block: 证 内 联 元 素 */ 
width:70px; 
height36px: 
color ff 
padding:0px 8px Opx 8px: 上 上 、 右 、 下 、 左 内 边 距 依次 为 Opx、8px、0px、8px*/ 
margin:0 14px 0 14px: 谍 上 、 右 、 下 、 左 外 边 距 依次 为 Opx、14px、0px、14px*/ 
text-decoration:none: /# 链 接 无 修饰 
text-align:center: 证 文字 居中 对 齐 */ 

有 

footer link a:hover { 让 鼠标 悬 停 链接 的 样式 */ 
color#CCC: 人 # 浅 灰色 文字 机 
text-decoration:underline: 刻下 夯 线 修 饰 */ 

b 

店 footer 样式 结束 */ 

(6) 在 线 咨询 样式 

上 * 在 线 咨 询 样式 开始 */ 

.online zx{ 
position:fixed; 
top:30pX: 
Tight:10px: 

上 

/在 线 咨询 样式 结束 所 


案例 : 制作 公司 新 闻 页 面 


【案例 展示 )】 制作 公司 新 闻 页 面 。 本 例文 件 news.html 在 浏览 器 中 的 显示 效果 如 图 12-5 所 
示 ， 页 面 结构 如 图 12-6 所 示 。 

【知识 要 点 】 图 片 、 列 表 和 图 文 混 排 技术 。 

【学 习 目标 】 掌 握 利用 图 像 、 列 表 和 图 文 混 排 等 CSS 样式 设计 网 页 的 技术 。 
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图 12-5 公司 新 闻 页 面 效果 图 
公司 新 闻 页 面 的 制作 过 程 如 下 。 
1. 页 面 整体 布局 设计 


网 站 首页 上 除了 包括 logo、 各 种 导航 链接 、 页 脚 的 链接 和 地 址 信息 外 ， 页 面 中 间 部 分 是 纵 
向 导航 菜单 和 新 闻 列 表 内 容 ， 页 面 布局 规划 如 图 12-6 所 示 。 


2. 网 页 结构 文件 


修改 网 站 首页 文件 index.html 的 代码 ， 修 改 id="content" 的 div 盒子 中 的 内 容 ， 修 改 的 代码 
如 下 。 
<div id="content"> 
<aside id="content-left"> 
<U> 
<li class="tp"> 新 闻 动 态 </li> 
<li><a hre 全 "newshtml"> 公 司 新 闻 </a>&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:<imsg stc= 
"img/triangle-icon-blue.png"/></li> 
<li><a hre 仁 "news_proinfo.html"> 产 品 资讯 </a></li> 
<li><a hre 仁 "news_marketing.html"> 营 销 动态 </a></li> 
<li class="yj"></li> 
< 
</aside> 
<div id="content-right"> 
<div class="tt"> 
<h3> 公 司 新 闻 </h3> 
</div> 
<div id="article"> 
<div class="news"> 
<uP> 
<li><a hre 人 "news_details html"> 因 应 智慧 汽车 概念 ，ADB 智能 LED 头 灯 系统 发 展 迅速 ，ADB 智 
能 LED 头 灯 兴起 </a> 
<span class="date">2018-03-30</span></li> 
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<li><ahre 人 ">LED 灯具 国内 业务 市 场 研讨 会 LED 灯具 国内 业务 2017-4-6</a> 
<span class="date">2018-03-23</span></li> 
<li><ahre 全 "> 车 用 、MiniLED 等 新 产品 助力 ， 亿 光 & 荣 创 看 好 营运 服务 工作 .</a> 
<span class="date">2018-03-19</span></li> 
<li><ahre 人 ">OLED 照明 市 场 的 机 会 与 挑战 -LEDinside</a> 
<span class="date">2018-03-16</span></li> 
<li><a hre 人 "> 江苏 加 快 半导体 照明 产业 发 展 ，2020 年 规模 将 达 1200 亿 .</a> 
<span class="date">2018-02-28</span></li> 
<li><a hre 仁 "> 智能 照明 进入 高 速 发 展 ， 工 业 及 商业 为 最 大 应 用 场景 .</a> 
<span class="date">2018-02-21</span></li> 
<li><a hre 仁 "> 景观 坝 LED 洗 墙 灯 怎 么 选 购 ? 您 不 能 忽略 这 些 细节 ! </a> 
<span class="date">2018-02-18</span></li> 
<li><a hre 全 ">LED 点 光源 的 线路 板 使 用 什么 材质 的 质量 好 ? </a> 
<span class="date">2018-02-13</span></li> 
<li><a hre 仁 "> 智能 照明 进入 高 速 发 展 ， 工 业 及 商业 为 最 大 应 用 场景 .</a> 
<span class="date">2018-03-08</span></li> 
</u> 
</div> 
<div class="page"> 
<hr> 
<Ul> 
<li><a href="">&laquo:</a></li> 
<li><a href="">&#8249:</a></li> 
<li><a href="">1</a></li> 
<li><a href="">2</a></li> 
<li><a href="">3</a></l> 
<l><a hre="">4</a></l> 
<li><a href="">5</a></l> 
<l><a href="">6</a></l> 
<li><a href="">&#8250;</a></li> 
<li><a href="">&raquo;</a></li> 


3. 外 部 样式 表 文 件 


修改 stylel.css 样式 文件 。 

(1) 页 面 整 体 布局 样式 、 页 面 项 部 样式 、 主 导航 样式 和 页 面 底部 区 域 样式 ， 所 有 页 面 共 用 。 
(2) 公司 新 闻 页 面 中 部 样式 定义 的 CSS 代码 如 下 。 

Q@ 页 面 左 侧 纵向 导航 菜单 的 样式 

请 二 级 页 面 中 间 - 左 侧 样式 */ 

#content-left{ 


和 so4 
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width:250px: 
height:auto: 此 自动 默认 高 度 */ 
float:left: 上 证 向 左 浮动 */ 

语 设 置 左 侧 纵向 导航 菜单 的 样式 */ 

#content-left ul{ 
list-style:none:; 片 不 显示 项 目 列表 符号 */ 
width:250px: 
background:#fEF /# 白 色 背 景 #/ 
border-radius:10px: 人 #10px 圆 角 半径 */ 
margin:0 auto: 访 上 下 外 边 距 为 0， 左右 宽度 自 适应 ( 即 居中 )*/ 
} 

#content-left ul li{ 片 设置 列表 项 的 样式 */ 
Width:250px: 
height:SOpx; 
margin-bottom: 1px; 刻下 外 边 距 为 1px*/ 
padding-left:80px ; 证 左 内 边 距 为 80px*/ 
backeground:#DDDDDD : 
font-size:14px; 
line-height:55px: 刻 行 高 为 55px*/ 
text-align:left: 刻 文 字 左 对 齐 */ 


} 

#content-left ul li a:link. #content-left ul li a:visited{ 
Color:#333; 

} 

#content-left ul li a:hover{ 
color: #0091D8; 


片 需要 单独 控制 的 列表 项 ， 第 一 个 和 最 后 一 个 列表 项 的 样式 */ 
#content-left ul .tp{ 
font-size:18px: 
font-weight:500; 
padding:0px: 刻 内 边 距 为 Opx*/ 
text-align:center; 
Width:250px: 
height:65px: 
line-height:80px : 
background: #BBB:; 
border-radius:10px 0 0 0; 人 # 左 上 圆 角 半径 为 0px， 其 他 角 为 直角 */ 
} 


#content-left ul yj{ 
height:20px: 
border-radius:0 0 0 10px: 让 左下 圆 角 半径 为 0px， 其 他 角 为 直角 */ 
margin-bottom:Spx : 刻下 外 边 距 为 5px*/ 
} 
片 二 级 页 面 中 间 - 左 侧 样式 结束 */ 
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@ 二 级 页 面 右 侧 样式 ， 所 有 二 级 和 三 级 页 面 共用 的 部 分 样式 


庆 二 级 页 面 中 间 - 右 侧 样式 s/ 
#content-right{ 
float:right: 
width:800px; 
height:auto; 
} 
#content-right .tt{ 
height:40px: 
width:785px; 
margin-left:15px: 上 # 左 外 边 距 为 15px*/ 
border-bottom: 2px solid #D6D6D6: ”人 * 下 边框 样式 ， 用 下 边框 实现 水 平 线 效果 */ 


有 
#contentrighth3f 
font-weight:500; 
font-size: 16px ; 
border-bottom:2px solid #0091D8:; ”人 * 下 边框 样式 ， 实 现 标题 下 面 的 横 线 效果 */ 
width:90px: 片 标题 空间 长 度 为 90px*/ 
padding:10px 0 7px Spx:; 上 # 上 、 右 、 下 、 左 内 边 距 分 别 是 10px、0、7px、5px*/ 
了 
#content-right #article{ 
width:800px: 
height:auto; 
} 
@ 新 闻 列表 列表 页 的 样式 


片 新 闻 动 态 -- 公 司 新 闻 列 表 样式 开始 */ 
#article .news{ 
width:780px: 
height:auto; 
margin: 20px Opx 20px 20px: 


} 
#article .news ul{ 
list-style:none: 
} 
#article .news ul li{ 
width:780px: 
height:30px: 
float:left: 
Inargin:SPX: 
border-bottom: 1px dotted #999999:; /#* 下 边框 为 1px 的 浅 灰 色 点 线 */ 
} 
#article .news ul li:before{ 
content: url(../img/triangle-icon-blue jpg): ”* 在 列表 项 内 容 前 插入 图 片 */ 
margin-right:Spx ; 
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b 
#article news ul li:nth-last-child(1){ 上 许 定 义 最 后 一 个 列表 项 的 样式 专 
borderbottom:0px ; 上 证 无 下 边框 */ 
} 
#article .news ul li a:link,a:visited{ 
text-decoration:none; 
color: #494949:; 
#article .news ul li a:hover{ 
color: #0091D8:; 
} 
#article .news ul li .date{ 
float:right: 
margin-right: 10px; 
; 
片 新 闻 动 态 -- 公 司 新 闻 列 表 样式 结束 */ 


@ 分 页 导航 样式 的 定义 


鱼 分 页 导航 样式 开始 对 

#article .page{ 

clear: both: 

text-align: center; 

Ppadding:15px 0 ; 

} 

#article .page ul{ 

margin-top:10px; 。” /* 上 外 边 距 为 10px*/ 
} 

#article .page li{ 

display:inline: 。 /* 在 一 行 上 显示 */ 
} 


#article .page af 

display:inline-block: 

width:20px: 

height:20px: 

border: 1px solid #0091D8: 

font-size: 14px: 

text-align:center; 

line-height:20px: 

font-family:" 宋 体 "; 

由 

#article .page Linth-child(3) af ” /* 为 第 三 个 元 素 加 背景 +/ 
backeround-color: #0091D8; 

有 

#article page a:hover{ 证 设置 鼠标 悬 停 时 的 背景 色 */ 
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background-color#DDD: 
} 
记分 页 导航 样式 结束 所 


案例 : 制作 联系 方式 页 面 


【案例 展示 】 制作 联系 方式 页 面 。 本 例文 件 contacthtml 在 浏览 器 中 的 显示 效果 如 图 12-7 所 
示 ， 页 面 结构 如 图 12-8 所 示 。 

【知识 要 点 】 纵 向 导航 菜单 、 新 闻 列表 和 翻 页 导航 按钮 的 设计 。 

【学 习 目 标 】 掌 握 利 用 图 像 、 列 表 和 图 文 混 排 等 CSS 样式 设计 网 页 的 技术 。 
A ae 


footer 


图 12-7 ”联系 方式 页 面 效果 图 图 12-8 联系 方式 页 面 结构 图 
联系 方式 页 面 的 制作 过 程 如 下 。 
1. 页 面 整体 布局 设计 


网 站 首页 上 除了 包括 logo、 各 种 导航 链接 、 页 脚 的 链接 和 地 址 信息 外 ， 页 面 中 间 部 分 是 地 
图 和 联系 方式 的 图 文 混 排 内 容 ， 页 面 结构 如 图 12-8 所 示 。 


2. 网 页 结构 文件 


修改 公司 新 闻 页 面 newshtml 的 代码 ， 修 改 id="content" 的 div 盒子 中 的 内 容 ， 修 改 后 的 代 
码 如 下 。 


<div id="content"> 
<div class="contact"> 
<h3>CONTACT 联系 我 们 </h3> 
<hr color="#D6D6D6" size="3" width="100%" align="center"/> 
<img se"img/map ipg” > 
<br> 


和 sos 
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<h4> 联 系 电话 : </h4> 
<p>0633-3981234 。” 张 先生 </p> 
<p>0633-3981235 ” 李 先 生 <p> 
<h4> 传 真 : </h4> 
<p>0633-3981234</p> 
<h4> 通 信 地 址 : </h4> 
<p> 山 东 省 日 照 市 学 苑 路 科技 工业 园 A 区 16 号 </p> 
<p> 邮 编 276826</p> 
</div> 
<div> 


3. 外 部 样式 表 文 件 


修改 stylel.css 样式 的 表 文件 。 
(1) 页 面 整体 布局 样式 、 页 面 顶部 样式 、 主 导航 样式 和 页 面 底部 区 域 样式 ， 所 有 页 面 共 用 。 
(2) 定义 联系 方式 页 面 中 部 样式 的 CSS 代码 如 下 。 


联系 方式 样式 定义 开始 */ 

#content .contact{ 
width:1050px: 
height: auto; 
margin: 20px 0 20px Opx: 

} 

#content .contact h3{ 
font-size:16px: 
font-weight:500; 
margin:20px 0 10px Spx : 

} 

#content .contact img{ 
width:550px: 
height:400px: 
float:left: 
margin:10px 30px 10px 0: 
border: 1px solid #D6D6D6: 

} 


#content .contact h4{ 
font-size:14px: 
font-weight:800: 
margin:30px 0 10px 30px: 
由 
#content .contact p{ 
text-indent:2em: 人 # 首 行 缩 进 2ems/ 
由 
人 # 联 系 方式 样式 定义 结束 六 
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【案例 说 明 】 本 例 中 联系 方式 的 显示 效果 虽然 是 列表 的 样式 , 但 实际 上 是 通过 文本 的 样式 设 


置 实现 的 。 


本 章 小 结 


本 章 首 先 介绍 了 科学 合理 的 网 站 开发 流程 ， 然 后 介绍 了 用 HBulider 创建 Web 项 目的 流程 ， 


并 介绍 了 网 站 首页 、 企 业 新 闻 和 联系 方式 页 面 的 设计 方法 。 


通过 本 章 的 学 习 ， 读 者 应 该 能 够 掌握 网 站 的 开发 流程 以 及 利用 CSS 布局 设计 网 页 的 方法 。 


练习 题 


1. 应 用 CSS 布局 技术 ， 设 计 爱 德 照明 网 站 的 “工程 案例 -客户 案例 ”页 面 ， 页 面 显示 效果 
如 图 12-9 所 示 。 
Allel i 


ET 


图 12-9 工程 案例 -客户 案例 页 面 


2. 应 用 CSS 布局 技术 ， 设 计 爱 德 照明 网 站 的 “客户 案例 -案例 
如 图 12-10 所 示 。 
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展示 ”页 面 ， 


页 面 显示 效果 


第 12 章 网 页 设计 基础 


Alalel pe 
, 


由 辐 直 内 让 


图 12-10 客户 案例 -案例 展示 页 面 


3. 应 用 CSS 布局 技术 ， 设 计 爱 德 照明 网 站 的 “产品 中 心 -LED 射 灯 ”页 面 ， 页 面 显示 效果 
如 图 12-11 所 示 。 


12-11 产品 中 心 -LED 射 灯 页 面 
4. 运用 HTML5 文档 的 基本 格式 制作 一 个 简单 的 页 面 并 浏览 该 页 面 。 
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